Question

import * as React from 'react';

type Props = {
  number: number,
}

type State = {

}

class Other extends React.Component <State, Props> {
  render() {
    const { number } = this.props;
    return (
      <div className="container">
        {number}
      </div>
    );
  }
}

//

import * as React from 'react';
type Props = {

}

type State = {
  number: number,
  cards: Array<{suit: string} | {rank: number}>,
}

class Example extends React.Component <Props, State>{
     <Other
       number={this.state.number}
     />
}

所以，在与React集成后，我得到了这个奇怪的错误。我的Example组件将number状态向下传递为Other的道具。在Other我告诉它number是一个应该是类型编号的道具。然而，它抱怨并说它应该处于状态??

我知道它应该是原始组件中的状态，但为什么它希望它在新组件中处于状态？肯定地说它处于状态是没有意义的，因为它只是一个我想渲染的只读道具

Answer 1

因为您混淆了Other组件上的类型声明。第一个参数应该是props接口，第二个应该是state。在您的原始示例中，您将传递State作为道具的声明，而相反地Props作为州的定义。这就是为什么你会得到Other期望值处于状态而不是道具的错误。

电流： class Other extends React.Component <State, Props>

应该是：class Other extends React.Component <Props, State>

州内缺少财产，但只是流量的支柱

1 个答案: