React，我刚开始编码，我有一个问题

Question

I am making a tic-tac-toe game right now, and I want to change the className of a random MyClickable object, after another one Is clicked, but I couldnt find a way to do that. Thanks for your help.

 export default class Box extends Component { render() { return ( <div className="box"> <MyClickable id='1' /> <MyClickable id='2' /> <MyClickable id='3' /> <MyClickable id='4' /> <MyClickable id='5' /> <MyClickable id='6' /> <MyClickable id='7' /> <MyClickable id='8' /> <MyClickable id='9' /> </div> ); } } let botPlay = () => { clickability-- } let timeout = () => { setTimeout(botPlay, 1500) } let clickability = 0 class MyClickable extends Component { state = { className: 'a' }

Answer 1

tl;dr You need to store the game board as state and pass the value down to MyClickable as a prop. Then MyClickable just looks at it's value prop - eg null , X , or O - and it manages it's own class name, depending on the value prop.

Full solution:

So start with your state - it should resemable a tic-tac-toe board and look something like this:

[
  [null,null,null],
  [null,null,null],
  [null,null,null],
]

Now we also need to know who's turn it is, so let's add that to state as well (we'll start with X)

{
   playerTurn: 'X',
   board: [
     [null,null,null],
     [null,null,null],
     [null,null,null],
   ]
}

Great, now we know what our state is supposed to look like, let's make the component:

expport class Board extends React.Component = {

   constructor() {
     this.state = {
       playerTurn: 'X',
       board: [
        [null,null,null],
        [null,null,null],
        [null,null,null],
      ]
     }
   }

   // when this is called, we update our board state and we change the player turn from X to O (or vice versa)
   handleClick = (row,col) => {
      // number 1 rule of React - don't mutate state (or props, or anything really)
      const nextBoard = [...this.state.board];

      // change the next turn to X, or O, depending on whose turn it is currently
      const nextTurn = this.state.playerTurn === 'X' ? 'O': 'X';


      // set the value of the board at row/col to X or O, depending on whose turn it is currently
      nextBoard[row][col] = this.state.playerTurn;

      // at this point you can determine if the game is over or not

      this.setState({playerTurn:nextTurn,board:nextBoard});
   }

   // helper - tells us if the game is over
   winner = () => {
     // return X if X has one, based on the state, or O is O has won, or null if nobody has won
     // leave this up to you to implement
   }

   render() {

     // if we have a winner, we can show who won!
     const winner = this.winner();
     if(winner) {
       return <div>{winner} won!</div>
     }

     // if we don't have a winner, show the game board
     return (
       <div className="box">
        {
          this.state.board.map((row,i) =>
            row.map((value,m) => (
              <MyClickable 
               // if this already has a value, pass undefined as `onClick`
               onClick={value ? undefined : () => this.handleClick(i,m)} 
               value={value}
             />
            ))
          )
         }
       </div>
     )
   }

}

Then you have MyClickable , something like this (we'll make a simple functional component because it doesn't have any state)

const MyClickable = ({onClick,value}) => {

  return (
    <div onClick={onClick}>
      {value}
    </div>
  )

}

If you want to change the class name of div rendered by the MyClickable component, all you need to do is look at value - it will either be null , X , or O :

const MyClickable = ({onClick,value}) => {

  return (
    <div className={value == null ? 'clickable' : 'already-clicked'} onClick={onClick}>
      {value}
    </div>
  )

}