Question

我在React.js网站上经历了反应教程（tic tac toe game），我希望在用户点击它时单独设置每个方块的样式。特别是，当它是玩家X时，方块应该变为红色＆＃当玩家转弯时，转弯并转蓝。我曾尝试使用道具和状态来改变颜色。但是，反应会改变所有方块，而不是单独改变方块的颜色。

以下是我迄今为止尝试过的内容。

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

您可以根据每个方块自身的值来确定每个方块内的背景颜色。如果它是＆＃39; X＆＃39;如果它是O＆＃39;你把它标记为蓝色。

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'}/>

如何单独渲染子组件的样式？

2 个答案: