反应通过状态到嵌套组件不起作用

Question

我不使用redux，因为它对我来说太难理解了：（

所以我尝试将状态传递给嵌套的组件，但是没有运气。

此处的代码：https://codesandbox.io/s/kwx43y2843

我希望使组件Nested与组件Two相同，输入onChange并实时更改文本。

我认为问题可能出在这一行。

<Nested state={this.props.state} />

非常感谢。

Answer 1

您忘记了嵌套组件中的props：

class Nested extends React.Component {
  render() {
    return (
      <div>
        <h2>Nested</h2>
        <div>FirstName: {this.props.state.firstName}</div>
        <div>lastName: {this.props.state.lastName}</div>
      </div>
    );
  }
}

请注意此之后的 .props ！

Answer 2

您像<Nested state={this.props.state} />一样传递它，但是要获得从props获得的状态

class Nested extends React.Component {
  render() {
    return (
      <div>
        <h2>Nested</h2>
        <div>FirstName: {this.props.state.firstName}</div> // added .props
        <div>lastName: {this.props.state.lastName}</div> // added .props
      </div>
    );
  }
}

有效的example

Answer 3

您缺少props组件中的Nested。您有this.state.firstName，它必须为this.props.state.firstName。

此外，在学习React或较小的应用程序时，您不必担心Redux-但是，一旦您开始对道具进行大量状态处理，便会派上用场。

Answer 4

不要调用道具状态

那么您想通过什么状态？因为您似乎传递了称为状态的道具，所以在反应时非常混乱。

一些例子来解释这个概念

您可以在此处看到传递变量，这些变量将成为子组件中的道具

父组件渲染方法

render() {
  const car = {id: '123'};
  return <CarDisplay car={car} />
}

子组件渲染方法

render() {
  console.log(this.props) // this will have car inside
  return <div>{this.props.car.id}</div>
}

如果您在父组件中具有状态，则当CarDisplay（子组件）组件呈现状态时，它仍然会变成道具。

具有状态的父组件

class car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {car: {id: '123'}}
  }
  render() {
    const { car } = this.state;
    return <CarDisplay car={car} />
  }
}

除非要使用setState react方法更改状态，否则不要使用状态。道具是只读的，因此可以用来显示数据等。