[解決済み] 型 '{}' は型 'IntrinsicAttributes & IntrinsicClassAttributes' に代入できません。
2022-01-29 13:56:19
質問
現在、簡単なreactアプリケーションを作っています。
これは私の
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<App />,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();
で、ここに私の
app.tsx
import * as React from 'react';
import SearchBar from '../containers/price_search_bar';
interface Props {
term: string;
}
class App extends React.Component<Props> {
// tslint:disable-next-line:typedef
constructor(props) {
super(props);
this.state = {term: '' };
}
render() {
return (
<div className="App">
<div className="App-header">
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
this is my application.
</p>
<div>
<form>
<SearchBar term={this.props.term} />
</form>
</div>
</div>
);
}
}
export default App;
と、検索バーのコンテナです。
import * as React from 'react';
interface Props {
term: string;
}
// tslint:disable-next-line:no-any
class SearchBar extends React.Component<Props> {
// tslint:disable-next-line:typedef
constructor(props) {
super(props);
this.state = { term: '' };
}
public render() {
return(
<form>
<input
placeholder="search for base budget"
className="form-control"
value={this.props.term}
/>
<span className="input-group-btn" >
<button type="submit" className="btn btn-secondary" >
Submit
</button>
</span>
</form>
);
}
}
export default SearchBar;
で、最後に私の
tsconfig.json
:
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": false,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"node_modules/@types"
],
"noUnusedLocals": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}
エラーに次ぐエラーが発生し、1つのエラーを修正するとまた別のエラーが表示されます。 これは最新のエラーです。
./src/index.tsx
(7,3): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<App> & Readonly<{ children?: ReactNode; }> & Reado...'.
Type '{}' is not assignable to type 'Readonly<Props>'.
Property 'term' is missing in type '{}'.
を修正して直そうとしたのですが
tsconfig.json
何が間違っているのか、なぜtypescriptはこのようなバグを起こすのか。私は非常に初心者で、この例によってreactがどのように動作するかをすべて理解しようとしています。
解決するには?
をたくさん解きました。 IntrinsicAttributes & IntrinsicClassAttributes のタイプには割り当てられません。 というタイプのエラー ( マイクロソフトが解決した問題 ) を宣言するだけで、そのオブジェクトは完全にコンポーネントに渡されます。
OP の例では、代わりに
term={this.props.term}
を使用します。
{...searchBarProps}
を実行すると動作するようになります。
render() {
const searchBarProps = { // make sure all required component's inputs/Props keys&types match
term: this.props.term
}
return (
<div className="App">
...
<div>
<form>
<SearchBar {...searchBarProps} />
</form>
</div>
</div>
);
}
関連
-
[解決済み] コマンドラインを使用してJSONオブジェクトの項目をカウントする方法は?
-
[解決済み] VBScriptによるJSONのデコード/エンコード
-
ajax return json format Report 500 Internal Server Error
-
[解決済み] 正しいJSONコンテンツタイプは何ですか?
-
[解決済み] YAMLとJSONの違いは何ですか?
-
[解決済み] nodeやExpressを使用してJSONを返す正しい方法
-
[解決済み】TypeScriptの "not assignable to parameter of type never "エラーとは?
-
[解決済み】Typescript Type 'string' はタイプに割り当てられない。
-
[解決済み] bashの変数をjqに渡す
-
[解決済み] JSON、REST、SOAP、WSDL、そしてSOA。これらはどのように結びついているのか
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JSON Schemaにおける "required "と "optional "の違いについて
-
[解決済み] VBScriptによるJSONのデコード/エンコード
-
ajax return json format Report 500 Internal Server Error
-
[解決済み] 複数の配列を持つJSONオブジェクトを作るにはどうしたらいいですか?
-
[解決済み] バイナリデータをJSON文字列で。Base64より優れたもの
-
[解決済み] JSONとは何か、何に使うのか?
-
[解決済み] .NET NewtonSoft JSONのデシリアライズマップを異なるプロパティ名に変更する。
-
[解決済み] JSON、REST、SOAP、WSDL、そしてSOA。これらはどのように結びついているのか
-
[解決済み] Mongo コレクションを JSON 形式にダンプする
-
[解決済み] GoでJSONを部分的にマップにアンマーシャルする