与 TypeScript 反应：类型“{}”不可分配给类型答案

【问题标题】：React with TypeScript: Type '{}' is not assignable to type与 TypeScript 反应：类型“{}”不可分配给类型
【发布时间】：2018-12-11 20:14:18
【问题描述】：

我在 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

【问题讨论】：

我认为你的意思是传播props而不是showNav，而不是{...this.props.showNav}而不是{...this.props}
提香——这是有意为之的。
这能回答你的问题吗？ Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes

标签： reactjs typescript

【解决方案1】：

所以解决方案是像这样将 {...this.props} 添加到组件中：

<TableSystems {...this.props}/>

【讨论】：

【解决方案2】：

您需要通过将属性 todos 定义为 todos?: any 来使其成为可选属性，或者您必须将值传递给它：{ todos: null, showNav: boolean }。

【讨论】：

我认为 Titan（在原始帖子中）正确评估了问题。

【解决方案3】：

虽然我只能猜测引发错误的元素（不知道第 19 行在哪里），但错误是不言自明的：

Type '{}' is not assignable to type 'Readonly<{ todos: any; showNav: boolean; }>'. Property 'todos' is missing in type '{}'.

组件需要todo 属性和showNav 属性，您没有提供这些。尝试明确指定道具：

<YourElement todos={ this.props.whatever } showNav={true}> ... </YourElement>

另一种解决方案是使用扩展运算符将对象属性用于元素的道具：

const someVar = { todos: "your type for todos here", showNav: true };

<YourElement { ...someVar } \>

确保您还键入了元素的道具：

interface Props {
    prop: string;
}

const SampleElement: React.SFC<Props> = (props) =>
    <div>{props.prop}</div>

class AnotherElement extends React.Component<Props> { ... }

【讨论】：