我目前正在制作一个简单的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> ); }更多推荐
类型"{}"不可分配给类型"IntrinsicAttributes& IntrinsicClassAttribut
发布评论