Javascript React.js道具解决问题

嘿，伙计们，我有一个关于道具的问题，我不太明白：

假设我有一个名为App的主组件和一个Header组件：

在应用程序中，我有一些html和

在Header组件中，我有如下内容：

你的名字是{this.props.name}，你的年龄是{this.props.age}

我不明白的是，道具在哪里分配，在哪里使用。name={“Max”}分配了道具还是this.props.name分配了道具，然后name={“Max”}使用它

---

我不确定我是否正确地解释了它，但我没有得到分配的方向。

如果标题组件从应用程序组件继承，那么它从应用程序组件获得它的道具

在应用程序组件中，您可以从其this.state定义这些道具，然后将这些状态作为属性分配给标题组件

例如：

class App extends Component {
  constructor( props ) {
    super( props );
    this.state = {
      age: 45,
      name: 'Robert'
    }
  }
  render() {
    return (
      <div>
        <Header ageOfPerson={this.state.age} nameOfPerson={this.state.name} />
      </div>
    );
  }

  class Header extends Component {
    constructor( props ) {
      super( props );
    }
    render() {
      <div>
        <p>{ this.props.ageOfPerson } is { this.props.nameOfPerson }s age.</p>
      </div>
    }
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
年龄:45,，
名字：“罗伯特”
}
}
render（）{
返回(
);
}
类头扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
{this.props.ageOfPerson}是{this.props.nameOfPerson}的年龄

}
}
}