如何单独呈现子组件的样式？

Question

我正在React.js网站上浏览react教程（井字游戏），我想在用户单击它时单独设置每个正方形的样式。更具体地说，当轮到玩家 X 时，正方形应该变成红色，当轮到玩家 O 时，正方形应该变成蓝色。我试图使用道具和状态来改变颜色。但是，react 会更改所有方块，而不是单独更改方块的颜色。

以下是我迄今为止所尝试的。

import React from 'react';
import ReactDOM from 'react-dom';

function Square (props) {

  let style={
    backgroundColor:props.bgColor,
    background:'#fff',
    border: '1px solid #999',
    float: 'left',
    fontSize: '24px',
    fontWeight: 'bold',
    lineHeight: '34px',
    height: '34px',
    marginRight:'-1px',
    marginTop: '-1px',
    padding: 0,
    textAlign:'center',
    width: '34px' 

    }
    return (
      <button className="square" style={style}onClick={props.onClick} >
        {props.value}
      </button>
    );

  }

  class Board extends React.Component {
    constructor() {
      super();

      this.state = {
        squares: Array(9).fill(null),
        xIsNext:true,
        color:'white'
      };
    }

    handleClick=(i)=>e=> {     
      const squares = this.state.squares.slice();

      if(calculateWinner(squares) ||squares[i]){
          return;
      }
      squares[i] = this.state.xIsNext?'X':'O';

      this.setState({squares: squares,
    xIsNext:!this.state.xIsNext});
    }

    renderSquare(i) {
      return (
        <Square
          value={this.state.squares[i]}
          onClick={ this.handleClick(i)}
          bgColor={this.state.xIsNext?'red':'blue'}
        />
      );
    }

    render() {
      const winner = calculateWinner(this.state.squares);
      let status;
      if(winner){
        status ="Winner: "+winner;
      }else{
        status = 'Next player: '+(this.state.xIsNext?'X':'O');
      }
      let boardStyle={        
              clear: 'both',
              content: "",
              display: 'table'        
          }
      return (

        <div>
          <div className="status">{status}</div>
          <div className="board-row" style={boardStyle}>
            {this.renderSquare(0)}
            {this.renderSquare(1)}
            {this.renderSquare(2)}
          </div>
          <div className="board-row" style={boardStyle}>
            {this.renderSquare(3)}
            {this.renderSquare(4)}
            {this.renderSquare(5)}
          </div>
          <div className="board-row" style={boardStyle}>
            {this.renderSquare(6)}
            {this.renderSquare(7)}
            {this.renderSquare(8)}
          </div>
        </div>
      );
    }
  }

  class Game extends React.Component {
    render() {

      return (
        <div className="game">
          <div className="game-board">
            <Board />
          </div>
          <div className="game-info">
            <div>{/* status */}</div>
            <ol>{/* TODO */}</ol>
          </div>
        </div>
      );
    }
  }  
  // ========================================  
  ReactDOM.render(
    <Game />,
    document.getElementById('root')
  );

  function calculateWinner(squares){
    const lines =[
      [0,1,2],
      [3,4,5],
      [6,7,8],
      [0,3,6],
      [1,4,7],
      [2,5,8],
      [0,4,8],
      [2,4,6]
    ];

    for(let i = 0;i<lines.length;i++){
      const [a,b,c] = lines[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;

  }

Answer 1

您也可以在renderSquare中执行此操作：

<Square value={this.state.squares[i]}
        onClick={ this.handleClick(i)}
        bgColor={this.state.squares[i]=='X'?'red':'blue'}/>

Answer 2

你可以根据每个方块的值来决定它的背景颜色。如果是X，你把它标为红色，如果是O，你把它标为蓝色。

let style={
    backgroundColor: {props.value === 'X' ? 'red' : 'blue'},