如何在没有可用数组的react中创建多个元素？

Question

我正在创建一个井字游戏，所以我需要创建9个空方块，我有一个UL和9个LIS每个代表游戏中的一个方块，问题是我没有数组循环通过和创建LIS作为react中的传统

   <ul className="squares">
        someArr.map((el, i) => {
           return <Square  props here/>
        })
   </ul>

const Square = (props) => {
  return <li {...props}></li>
}

现在我被迫手工创建所有的lis，并将道具传递到每个li中，这看起来太难看了！！

 <ul>
      <li className="square" ></li>
      <li className="square" ></li>
      <li className="square" ></li>
      <li className="square" ></li>
      <li className="square" ></li>
      <li className="square" ></li>
      <li className="square" ></li>
      <li className="square" ></li>
      <li className="square" ></li>
</ul>

有没有办法即使在没有数组来创建多个元素的情况下也能实现可重用性？

Answer 1

您可以简单地创建一个长度为9的空数组，然后`map到它上面，如下所示:

[...Array(9)].map((_, i) => <li className="square" key={i}></li>)

演示:

null

const Square = (props) => <li className="square"></li>

class App extends React.Component {
  render() {
    return (
      <ul>
        {[...Array(9)].map((_, i) => <Square key={i} />)}
      </ul>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

.square{ width:50px;height:50px;background:skyblue; float:left; margin:5px;list-style-type:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>