通过div

Question

我正在尝试使用reactjs创建一个div板。为了找到板上的元素，我想传递像行和列id这样的道具。

componentDidMount() {
  let board = [];
  for(let i = 0; i < 30; i++){
    for(let j = 0; j < 50; j++){
      board.push(<div className={"board-element"} row={i} col={j}></div>);
    }
  }
  this.setState({elements: board});
}

for循环创建一个元素列表，完成后更改状态并将列表设置为主div。

render() {
  return (
    <div className="board center-div">
      {this.state.elements} // HERE
    </div>
  );
}

但是如果我检查渲染的html，那么行和col就会丢失。

<div class="board-element"></div>

在控制台上有一个警告：

Warning: Unknown props `row`, `col` on <div> tag. Remove these props from the element. For details, see ...

Answer 1

为什么不直接渲染，而不将元素存储在状态中？

function Board() {
    let board = [];
    for(let i = 0; i < 30; i++){
        for(let j = 0; j < 50; j++){
            board.push(<div key={`${i}-${j}`} className={"board-element"}>{i}{j}</div>);
        }
    }

    return (
        <div className="board center-div">
            {board}
        </div>
    )
}   



ReactDOM.render(
  <Board name="World" />,
  document.getElementById('container')
);

Working example

Answer 2

将行和列更改为data-row和data-col。