Question

在下面的Parent课程中，this.state.foo按预期工作，但在Child课程中，this.props.foo未定义。

这是一个常见问题，但我从其他线程尝试过的解决方案都没有奏效。

React -v：16.3

class Parent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      foo: 'test'
     };
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">{this.state.foo}</h1>
        </header>
      <Child />
      </div>
    );
  }
}


class Child extends Component {

  render() {
    return (
      <div className="child">
        <h1>This is a {this.props.foo}</h1>
    </div>
     );
  }
}


export default Parent;

Answer 1

您需要将道具转移到Child：

<Child foo={this.state.foo} />

state的{{1}}不会自动转移到Parent。

Answer 2

您需要将道具转移到子组件：

<child foo={this.state.foo} />

您只能阅读子组件中的道具

Answer 3

确定如果您想在子组件中访问foo作为道具，那么您需要在子组件中传递this.state.foo，如下所示

<Child foo = {this.state.foo}  />

因此，请在代码中更改此内容

class Parent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      foo: 'test'
     };
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">{this.state.foo}</h1>
        </header>
      <Child foo = {this.state.foo}  />
      </div>
    );
  }
}


class Child extends Component {

  render() {
    return (
      <div className="child">
        <h1>This is a {this.props.foo}</h1>
    </div>
     );
  }
}


export default Parent;

React：传递给子类的道具不起作用

3 个答案: