子コンポーネントのスタイルを個別にレンダリングする方法は？

Question

私はReact.jsのウェブサイト上で反応チュートリアル（tic tac toe game）を行っていました。ユーザーがクリックすると、それぞれの四角形を個別にスタイルしたいと思っています。特に、プレーヤーXの回転で、プレイヤーOのターンで青色に変わります。私は色を変えるために小道具と状態を使用しようとしました。しかし、反応すると、四角形の色を個別に変更する代わりに、四角形がすべて変更されます。

以下はこれまでに試したことです。

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

各四角形の内側の背景色は、それ自身の値に基づいて決めることができます。それが「X」の場合は赤、それが「O」の場合は青です。

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

Answer 2

あなたにもrenderSquareでこれを行うことができます。

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