[英]React with TypeScript: Type '{}' is not assignable to type
I have a component in React that shows a navigation based on a prop. 我在React中有一个组件,该组件显示基于道具的导航。 I cannot figure out why I am getting this error when I'm trying to run the application:
我无法弄清楚为什么在尝试运行应用程序时出现此错误:
(19,8): Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TableSystems> & Readonly<{ children?: ReactNode; }...'.
Type '{}' is not assignable to type 'Readonly<{ todos: any; showNav: boolean; }>'.
Property 'todos' is missing in type '{}'.
My component look like this: 我的组件如下所示:
import * as React from 'react'
import Navigation from '../components/Navigation'
import TableSystems from '../components/TableSystems'
class SystemTable extends React.PureComponent<{showNav: boolean }> {
render(){
return (
<div >
<div >
<div className="navigationContainer">
<Navigation {...this.props.showNav} className="sideMenu"/>
<TableSystems/>
</div>
</div>
</div>)
}
}
export default SystemTable
I can't find what's the problem here. 我在这里找不到问题。
The component looks like this: 该组件如下所示:
import * as React from 'react';
import history from '../history';
class Navigation extends React.Component<any> {
constructor(props){
super(props);
this.toVersions = this.toVersions.bind(this);
}
toVersions(){
history.push('/versions');
}
render() {
var style = this.props.visible ? "toggled" : "";
console.log(style);
return (
<div className={style} id="wrapper">
<div id="sidebar-wrapper">
<ul className="sidebar-nav">
<li className="sidebar-brand">
<a href="#">
Menu
</a>
</li>
<li >
<a className="nav-link" href="#">List1</a>
</li>
<li >
<a className="nav-link" href="#">List2</a>
</li>
<li >
<a className="nav-link" href="" onClick={this.toVersions}>List3</a>
</li>
<li >
<a className="nav-link" href="#">List4</a>
</li>
</ul>
</div>
</div>
)
}
}
export default Navigation
您需要通过将属性todos
定义为todos?: any
使其成为可选属性,否则必须将值传递给它: { todos: null, showNav: boolean }
。
While I can only guess the element throwing the error (no clue where line 19 is), the error is quite self explanatory: 虽然我只能猜测引发错误的元素(不知道第19行在哪里),但错误是很容易解释的:
Type '{}' is not assignable to type 'Readonly<{ todos: any; showNav: boolean; }>'. Property 'todos' is missing in type '{}'.
The component expects a todo
property and a showNav
property, you are providing none of these. 该组件需要一个
todo
属性和一个showNav
属性,您没有提供任何这些。 Try specifying the props explicitly: 尝试明确指定道具:
<YourElement todos={ this.props.whatever } showNav={true}> ... </YourElement>
Another solution is to use the spread operator to use an objects properties for the element's props: 另一种解决方案是使用散布运算符为元素的道具使用对象属性:
const someVar = { todos: "your type for todos here", showNav: true };
<YourElement { ...someVar } \>
Ensure you also type your element's props: 确保您还键入了元素的道具:
interface Props {
prop: string;
}
const SampleElement: React.SFC<Props> = (props) =>
<div>{props.prop}</div>
class AnotherElement extends React.Component<Props> { ... }
因此解决方案是将{... this.props}添加到组件中,如下所示:
<TableSystems {...this.props}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.