类型"{}"不可分配给类型"IntrinsicAttributes& IntrinsicClassAttributes

本文介绍了类型"{}"不可分配给类型"IntrinsicAttributes& IntrinsicClassAttributes的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我目前正在制作一个简单的react应用程序. 这是我的index.tsx

i am currently making a simple react application. this is my 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" ] }

在出现错误之后，我会不断收到不同的错误，并且每当我纠正一个错误时，就会出现另一个错误，我不确定自己所做的事情如何使它表现得像这样. 这是最新的错误:

I keep getting different errors after errors and when ever I fix one error another one appears, I am not sure what I have done that make it behave like this. This is the latest error:

./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来修复它，但是仍然出现相同的错误，我在做什么错以及为什么打字稿会这样ba绕.我对此很陌生，在这个示例中，我试图了解反应如何共同发挥作用.

I tried to fix it by modifying my tsconfig.json but the same error still appears, what am I doing wrong and why typescript is bahing like this. I am very new to this and by this example I am trying to udnertand how react works all together.

推荐答案

我解决了很多类型的错误( Microsoft已关闭问题)，只需声明一个完全传递给组件的对象即可.

I solved a lot of "not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes" type of errors (Microsoft closed issue) just by declaring an object that is passed entirely to the component.

以OP的示例为例，而不是使用term={this.props.term}，请使用{...searchBarProps}使其正常工作:

With the OP's example, instead of using term={this.props.term}, use {...searchBarProps} to get it working:

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> ); }