如何在 ReactJS 中的两个类、组件之间传递数据？

Question

I have two classes. I want to pass data from one class to another. How can I achieve that?

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

You can access the data in class B using:

this.props.data

Answer 2

Your B component will be given a prop called data which you can access with this.props.data within your B component.

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>
    );

}