React中父组件向子组件传值

ゝ一世哀愁。 2022-10-30 06:25 200阅读 0赞

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