Question

以下代码在终端编译成功。请注意，我认为只有从“Square”向下的线条直接相关。

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
    
const size = 30

class DropDown extends React.Component{
  algorithm_states = {
    alg:0,
  }
  algClick(i){
    this.algorithm_states.alg = i;
  }
  startResetClick(i){
    switch(i){
      default:
      case 0:
        //enable disable buttons on grid
        //run relevent processes bases on algorithm state machine
        break;
      case 1:
        // clear grid and matrix
        // enable buttons on grid
        break;
    }
  }
  render(){
    return(
      <header>
        <button className = "main">
          Main
        </button>
        <div className="dropdown">
          <span>Choose Rule</span>
          <div className="dropdown-content">
            {/* algorithms mapped to their indicies in list */}
            <button
              onClick={() => this.algClick(0)}
            >Game Of Life</button>
            <button
              onClick={() => this.algClick(1)}
            >Langtons Ant</button>
          </div>
        </div>
        {/* start button mapped to 0, reset button mapped to 1 */}
        <button
          className = "start"
          onClick={() => this.startResetClick(0)}
          >START</button>
        <button
          className = "stop"
          onClick={() => this.startResetClick(1)}
          >RESET</button>
      </header>
    )
  }
}

class Square extends React.Component {
  keys = {
    x:null,
    y:null,
  }
  render() {
    return (
      <button className="square" key = {this.keys.x + this.keys.y}>
      </button>
    );
  }
}


class Board extends React.Component{
  renderSquare(x, y) {
    return (
      <Square
        keys = {[x,y]}/>
    );
  }

  render(){
    const rows = [], cols = [];
    for(var i = 0;  i < size; i++){
      rows[i] = i;
      cols[i] = i;
    }
    return(
      <div>
        {[...rows].map((x) => {
            return (
              <div className="board-row" key={x}>
                {[...cols].map((y) => this.renderSquare(x,y))}
              </div>
            )
          })
        }
      </div>
    )
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <header className = "header">
          <DropDown/>
        </header>
        <body>
          <div className="game-board">
            <Board />
          </div>
        </body>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

index.css

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

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

.header{
  background: "black";
}

.main {
  position: absolute;
  left: 5%
}

.game-board{
  position: absolute;
  top: 20%;
  left:30%;
}

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

.status {
  margin-bottom: 10px;
}

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

.square:focus {
  outline: none;
}

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

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

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

.dropdown {
  position: absolute;
  top: 20%;
  left: 5%;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.start{
  position: absolute;
  right: 15%;
}
.stop{
  position: absolute;
  right: 5%;
}

但是在浏览器中，我收到错误

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Board`. See https://reactjs.org/link/warning-keys for more information.
Square@http://localhost:3000/static/js/main.chunk.js:249:5
Board@http://localhost:3000/static/js/main.chunk.js:268:1
div
body
div
Game@http://localhost:3000/static/js/main.chunk.js:308:1

而且我不确定它是关于什么的，因为我很确定我提供的所有密钥都是唯一的。

有人有什么想法吗？？？

干杯

K

Answer 1

您需要在 Square 级别使用键渲染每个 map 组件：

  render(){
    const rows = [], cols = [];
    for(var i = 0;  i < size; i++){
      rows[i] = i;
      cols[i] = i;
    }
    return(
      <div>
        {[...rows].map((x) => {
            return (
              <div className="board-row">
                {[...cols].map((y) => (
                  <Square keys={[x,y]} key={`x-y`} />
                ))}
              </div>
            )
          })
        }
      </div>
    )
  }
}

请参阅 docs 上的参考

反应嵌套循环错误

1 个答案: