Question

（首先，抱歉我的英语不好）

我不是专家，我不确定。但我想要的是添加尽可能多的节点。

当我没有使用＆＃39;循环：

<script type="text/babel">
function addnode(){
    var node = (
        <div className="node"></div>
    )
    ReactDOM.render(
        node,
        document.getElementById("root")
    )
}
addnode();
</script>

结果：

<div id="root"><div data-reactroot="" class="node"></div></div>

但它不起作用（ 我不知道我是否做得对。但问题是for循环。）：

<script type="text/babel">
function addnode(){
    var node = ""
    for(var i=0; i<20; i++){
        node += (
            <div className="node"></div>
        )
    }
    ReactDOM.render(
        node,
        document.getElementById("root")
    )
}
addnode();
</script>

错误代码：

babel.min.js:27 Uncaught SyntaxError: Inline Babel script: Unexpected token (4:28)

 function setseat(){
     var node = ""
     for(var i=0; i&lt;20; i++){
                         ^
         node += (
             <div className="node"></div>
         )

有没有其他方法可以正确使用它或替换它？

Answer 1

使用map函数在React中循环。

假设您有几个元素，arrayList ..

render(){
    var arrayList = [1,2,3,4,5,6];
    return(
    {    <ul>
             arrayList.map(function(a){return <li key={a}>{a}</li>
         </ul>
    })
    )
}

让你的地图回调返回一个html元素

Answer 2

是的，你可以。但你需要了解一些事情。

根元素应该只有一个。
使用Array.prototype.map渲染列表元素。

您正尝试以root身份使用每个列表。要解决此问题，您需要使用<div></div>标记包装列表。

    <html>
      <body>
        <div id="root"></div>
      </body>
    </html>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    <script type="text/babel">
    function addnode(){
        let node = [];
        for(var i=0; i<20; i++){
            node.push(i);
        }
        const contents = node.map(each=>{
          return (
            <div key={each} className={each}>{each}</div>
          )
        });
        const wrapper = (
          <div className="wrapper">
            {contents}
          </div>
        );
        ReactDOM.render(
            wrapper,
            document.getElementById("root")
        )
    }
    addnode();
    </script>

我可以使用＆＃39;反应中的循环（巴贝尔js）

2 个答案: