傳遞道具通過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的行和列丟失。

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

並在控制檯上有一個警告：

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

Answer 1

更改行和山口以data-row和data-col。

Answer 2

爲什麼不直接呈現，而無需存儲狀態的元素？

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