React 组件父子传值

React 的父子传值，其实非常简单，但是网上基本都是这种的。

Class - 子组件通过 this.props 中获取数据

父组件要向子组件传递 dataFromParent 的值，注意代码中的 dataFromParent 就可以了

Parent.jsx

class Parent extends React.Component {
  state = { data: 'Hello World' };
  render() {
    return (
      <div>
        <Child1 /> //no data to send
        <Child2 dataFromParent={this.state.data} />
      </div>
    );
  }
}

Child.js

class Child2 extends React.Component {
  render() {
    return <div>The data from parent is:{this.props.dataFromParent}</div>;
  }
}

如果不知道 state 和 props 都从哪里来，可以看一下 React.Component 文档就好啦

Function - 子组件通过函数的形参获取值

这儿抄一下 React 官方的 demo

父组件要向子组件传递 date 的值，注意代码中的 date 就可以了

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(<Clock date={new Date()} />, document.getElementById('root'));
}

setInterval(tick, 1000);

官方文档再此：State and Lifecycle