如何在 ReactJS 中的兩個類、組件之間傳遞數據？

Question

我有兩節課。 我想將數據從一個 class 傳遞到另一個。 我怎樣才能做到這一點？

class A extends React.Component {
  render() {
    return (
      <B  data={this.getData()} />
    );
  }
}


class B extends React.Component {
    //How can i consume "data" in here?
}

Answer 1

您可以使用以下命令訪問 class B 中的數據：

this.props.data

Answer 2

您的B組件將獲得一個名為data的道具，您可以在B組件中使用this.props.data訪問該道具。

https://reactjs.org/tutorial/tutorial.html#passing-data-through-props

class A extends React.Component {
  getData() {
    return [ { "test": "data" } ];
  }

  render() {
    return (
      <B  data={this.getData()} />
    );
  }
}


class B extends React.Component {
  render() {
    return (
      <label>test: <span>{this.props.data['test']}</span></label>
    );

}