Javascript 反应：道具传递给儿童类不起作用

在下面的

Parent

类中，

this.state.foo

按预期工作，但是在

子类中，
this.props.foo
未定义

这是一个常见的问题，但是我从其他线程尝试的解决方案都不起作用

反应-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;

类父级扩展组件{
建造师（道具）{
超级（道具）
此.state={
傅：“测试”
};
}
render（）{
返回(
{this.state.foo}
);
}
}
类子扩展组件{
render（）{
返回(
这是一个{This.props.foo}
);
}
}
导出默认父对象；
您需要将道具转移到
儿童
：

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



父项的
状态
不会自动传递给
子项
，您需要将道具转移到
子项
：

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



父级的
状态
不会自动传递给
子级
确定如果您想作为道具访问子组件中的
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;

类父级扩展组件{
建造师（道具）{
超级（道具）
此.state={
傅：“测试”
};
}
render（）{
返回(
{this.state.foo}
);
}
}
类子扩展组件{
render（）{
返回(
这是一个{This.props.foo}
);
}
}
导出默认父对象；
确定如果您想作为道具访问子组件中的
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;

类父级扩展组件{
建造师（道具）{
超级（道具）
此.state={
傅：“测试”
};
}
render（）{
返回(
{this.state.foo}
);
}
}
类子扩展组件{
render（）{
返回(
这是一个{This.props.foo}
);
}
}
导出默认父对象；
您需要将道具转移到子组件：

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



如果您只能读取子组件中的道具
，则需要将道具传输到子组件：

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



如果您只能读取子组件中的道具
您不会将道具传递给子组件，这就是它未定义的原因您不会将道具传递给子组件，这就是它未定义的原因