React JS渲染父级不会再次渲染子级

Question

I am having some issues with React JS rendering children when rendering the parent. Here I am trying to implement the "Game of Life" (a project from Freecodecamp class). I am stuck in this situation. I click on a dead cell and it becomes alive (blue). Then, suppose I want to clear the grid, that is, make all cells dead, but it doesn't work. It seems that even re-rendering the parent will not re-render the children.

Any idea?

 var board = []; var width = 80; var length = 50; var cells = width * length; var states = ["alive", "dead"]; class BoardGrid extends React.Component { constructor(props) { super(props); //this.initBoardArray = this.initBoardArray.bind(this); } render() { //this.initBoardArray(); let boardDOM = this.props.board.map(function(cell) { return <BoardGridCell status={cell.status} id={cell.id} />; }); return ( <div id="game-grid"> {boardDOM} </div> ); } } class BoardGridCell extends React.Component { render() { return ( <div id={this.props.id} className={`cell ${this.props.status}`} data-status={this.props.status} /> ); } } function initBoard() { for (let cellIndex = 0; cellIndex < cells; cellIndex++) { let cell = { id: cellIndex, status: "dead" }; board[cellIndex] = cell; } } function drawBoard() { ReactDOM.render( <BoardGrid board={board} />, document.getElementById("game-grid-wrapper") ); } function clearBoard() { for (let cellIndex = 0; cellIndex < cells; cellIndex++) { let cell = { id: cellIndex, status: "dead" }; board[cellIndex] = cell; } } $("#game-grid-wrapper").on("click", ".cell", function() { let currentState = $(this).attr("data-status"); let currentStateIndex = states.indexOf(currentState); let newState = states[(currentStateIndex + 1) % 2]; $(this).attr("class", `cell ${newState}`); $(this).attr("data-status", newState); }); $("#stop").on("click", function() { alert("clearing"); clearBoard(); drawBoard(); }); initBoard(); drawBoard(); 

 html, body { height: 100%; text-align: center; font-family: 'Open Sans', sans-serif; } h1, h2 { font-family: 'Press Start 2P', cursive; } .button { width: 100px; border: 1px solid #555; padding: 5px; margin: 5px; cursor: pointer; border-radius: 4px; } .button:hover { opacity: 0.9; } #main { margin: 10px; } #game-grid { background-color: #000; display: flex; flex-wrap: wrap; align-content: flex-start; width: 800px; height: 500px; overflow: hidden; } #game-grid .cell { border: 1px solid #767676; width: 10px; height: 10px; color: #fff; font-size: 9px; box-sizing: border-box; } .alive { background-color: #2185d0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <div id="game-actions"> <div id="start" class="button"><i class="fa fa-play"></i> Start</div> <div id="pause" class="button"><i class="fa fa-pause"></i> Pause</div> <div id="stop" class="button"><i class="fa fa-stop"></i> Stop</div> </div> <div id='game-grid-wrapper'></div> </div> 

Answer 1

You should not use jQuery together with React if you don't have to. Both manipulate the DOM but based on different information which can make them interfere in an unexpected way.

For your board state you should use the state of your BoardGrid component . Initialize your state in the constructor and add an onClick() callback to each cell when rendering it.

When the cell is clicked call the callback function given by the board component and pass it's id with it. Use that id to update the board state using setState() in your BoardGrid component.

I can add some example code later, if you struggle with anything.