React中父组件向子组件传值

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// Square 组件（子组件）
class Square extends React.Component {
  // 构造函数，必须写super(props); 构造函数里面可以初始化一些变量
  constructor(props) {
    super(props);
    this.state = { value: null }
   }
  render() {
    return ( < button className = "square"
        onClick = { () => this.setState({ value: 'X' }) } >
      { /* 通过this.props接收value值 */ }
      { this.props.value } </button>
    );
  }
}
// Board 组件（父组件）
class Board extends React.Component {
  renderSquare(i) {
    // 通过 value = { i } 的形式向子组件传递数据  
    return <Square value = { i }/> ;
  }
  render() {
    const status = 'Next player: X';
    return ( <div>
      <div className = "status" > { status } </div>
      <div className="board-row" >
        {this.renderSquare(0)}
        {this.renderSquare(1)}
        {this.renderSquare(2)}
      </div>
      <div className="board-row" >
        {this.renderSquare(3)}
        {this.renderSquare(4)}
        {this.renderSquare(5)}
      </div>
      <div className="board-row" >
        {this.renderSquare(6)}
        {this.renderSquare(7)}
        {this.renderSquare(8)}
      </div>
    </div >
    );
  }
}
// Game 组件 （爷爷组件）
class Game extends React.Component {
  render() {
    return ( <div className = "game" >
      <div className = "game-board" >
      <Board />
      </div> <div className = "game-info" >
      <div > {
      } </div> <ol > {
        /* TODO */
      } </ol> </div > </div>
    );
  }
}
ReactDOM.render( <Game /> ,
  document.getElementById('root')
);