하위 구성 요소의 스타일을 개별적으로 렌더링하는 방법은 무엇입니까?

Question

React.js 웹 사이트에서 반응 튜토리얼 (tic tac toe 게임)을 진행하고 있었고 사용자가 클릭 할 때 각 사각형을 개별적으로 스타일링하고 싶습니다. 특히 플레이어 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'}/>