我可以用「for」循環中反應（巴貝爾JS）

我不是專家，我不知道。但我想要的是添加儘可能多的節點，我想要的。

它的工作時，我沒有 'for' 循環使用：

<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> 
     )

有另一種方式正確地使用這個或替代它？

來源

2017-08-10 장준홍

您可以使用循環，但不能使用'+ =' – Bergi

@Bergi我把它歸功於 –

是的，可以。但是你需要知道一些事情。

根元素應該只有一個。
使用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>

來源

2017-08-10 03:47:06 HyeonJunOh

感謝친절하시네요:) –

도움되셔서다행입니다。 ^^ – HyeonJunOh

使用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元素

來源

2017-08-10 03:30:01 kotAPI

我可以用「for」循環中反應（巴貝爾JS）

回答

相關問題