reactjs - 与 TypeScript 反应:类型“{}”不可分配给类型
问题描述
我在 React 中有一个组件,它显示基于道具的导航。当我尝试运行应用程序时,我无法弄清楚为什么会出现此错误:
(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 '{}'.
我的组件如下所示:
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
我找不到这里有什么问题。
该组件如下所示:
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
解决方案
所以解决方案是将 {...this.props} 添加到组件中,如下所示:
<TableSystems {...this.props}/>
推荐阅读
- javascript - 如何访问子组件的方法?
- javascript - 使用jquery避免在同一个表中重复数据
- python - 如何在 Django 1.11 的 Detailview 中添加类似的帖子
- java - 从活动移动到上一个片段
- c# - 与给定 SQL 查询等效的 LINQ MVC 查询是什么?
- python - 基于数值有条件地创建数据框列
- java - java.lang.NoClassDefFoundError - org/apache/spark/sql/hive/HiveContext
- apache-spark - 如何使用 array_remove Spark SQL 内置函数删除空值
- android - 如何检测用户何时以编程方式在android中打开/关闭对讲
- rust - 不能在 if-let 语句的 else 块中可变地借用