时间戳

首页 > 解决方案 > 如何在没有可用数组的情况下在反应中创建多个元素？

javascript - 如何在没有可用数组的情况下在反应中创建多个元素？

问题描述

我正在创建一个井字游戏，所以我需要创建 9 个空方格，我有 aul和 9 lis 每个代表游戏中的一个方格，问题是我没有数组可以循环并创建lis 作为反应中的传统

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

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

现在我不得不li手动创建所有的 s 并将道具传递给每个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>

即使没有数组来创建多个元素，有没有办法实现可重用性？

标签： javascriptreactjs

解决方案

您可以简单地创建一个长度为空的数组，9然后在其上映射，如下所示：

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

演示：

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>

推荐阅读