javascript - 我如何设置一个条件函数来影响一个组件而不是更大的组件

Question

我正在尝试设置一个条件语句，该语句基本上采用一个按钮并说当我单击该按钮时我希望出现一个 X 并且我希望该按钮的颜色变为红色，当前整个面板都变为该颜色我要求它。

我试过将条件放在不同的地方看看是否行得通它行不通条件语句需要放在什么地方

    if (this.state.xIsNext = 'X') {
    backgroundColor='red';
    }
else if (this.state.xIsNext = 'O') {
    backgroundColor='yellow';
     }
  }
  renderSquare(i, backgroundColor) {

return (
  <Square
    value={this.state.squares[i] || 'X'}
    onClick={() => this.handleClick(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>
);
  }
}

项目也可以在这里查看https://codepen.io/zachary-blumstein/pen/KKPJaLG?editors=0010

Answer 1

您可以更改 background在state成为一个保存每个方 block 颜色的对象并在点击时更新它:

var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      backgroundColor: {
        1: 'gray',
        2: 'gray',
        3: 'gray',
        4: 'gray',
        5: 'gray',
        6: 'gray',
        7: 'gray',
        8: 'gray',
        9: 'gray',
      },
      squares: Array(9).fill(null),
      xIsNext: true,
    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O'
   
      
    this.setState({
      backgroundColor: {
        ...this.state.backgroundColor,
        [i]: this.state.xIsNext ? 'yellow': 'red'
      },
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });

  }
  
  checkColorOfSquare= (xIsNext, backgroundColor) => {
    if (this.state.xIsNext = 'X') {
        backgroundColor='red';
        }
    else if (this.state.xIsNext = 'O') {
        backgroundColor='yellow';
         }
  }
  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i] || 'X'}
        color={this.state.backgroundColor[i]}
        onClick={() => this.handleClick(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>
    );
  }
}



function Square(props) {
  return (
    <button className="square" onClick={props.onClick} style={{ backgroundColor: props.color}}>
      {props.value}
    </button>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Board />, rootElement);

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

或者更好，拥有<Square />组件有自己的状态，有自己的颜色和自己的 click处理程序。

var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {     
      squares: Array(9).fill(null),
      xIsNext: true,
    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O'   
      
    this.setState({     
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }
  
  checkColorOfSquare= (xIsNext, backgroundColor) => {
    if (this.state.xIsNext = 'X') {
        backgroundColor='red';
        }
    else if (this.state.xIsNext = 'O') {
        backgroundColor='yellow';
         }
  }
  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i] || 'X'}        
        onClick={() => this.handleClick(i)}
        xIsNext={this.state.xIsNext}
        ndx={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>
    );
  }
}



class Square extends React.Component {
  state = {
    color: 'gray'
  }

  handleClick = e => {    
     this.setState({
       color: this.props.xIsNext ? 'yellow': 'red'
     });
    
    this.props.onClick(this.props.ndx);
  }
  
  render(){
    return (
      <button className="square" onClick={this.handleClick} style={{ backgroundColor: this.state.color}}>
        {this.props.value}
      </button>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Board />, rootElement);

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>