如何渲染一個元素（React Class）任意多次？

我有兩個組成部分：如何渲染一個元素（React Class）任意多次？

var kBoard = React.createClass({ 
    getInitialState: function() { 
     return {numCols: 0}; 
    }, 
    componentDidMount: function(){ 
     //simplified 
     this.setState({numCols: 3}); 
    }, 
    render: function() { 
     return(
      <div className="kBoard"> 
       I'm a board 
       //TODO: insert columns 
      </div> 
     ); 
    } 
}); 

var kColumn = React.createClass({ 
    render: function() { 
     return (
      <div className='kColumn'> 
       I'm a column 
      </div> 
     ); 
    } 
});

凡說//TODO: insert columns，我想插入等於this.state.numCols一些Column組件。

我嘗試了一個簡單的for循環，但在瞭解了更多關於JSX如何編譯爲JS的信息之後，我明白了爲什麼這樣做不起作用。我覺得我應該用map以某種方式使用，但是我還沒有把它弄清楚。

來源

2016-08-24 souldeux

作出反應的關鍵接受元素的數組，所以你可以使用它爲一個或while循環，或Array.prototype.map創建。您還可以使用Array.from創建長度爲x的新陣，與列填充它：

render: function() { 
    return(
     <div className="kBoard"> 
      I'm a board 
      { 
       Array.from({ length: this.state.numCols }, (v, k) => <kColumn key={ k } />) 
      } 
     </div> 
    ); 
}

注 - 反應成分名稱應以大寫的情況下開始 - kColumn - > KColumn。

來源

2016-08-24 13:57:26

這是工作完美，但我在這說陣列中的每個孩子都應該有一個獨特的'key'道具控制檯得到一個（無關緊要？）錯誤。我試着做''沒有任何效果。有沒有辦法通過'Array.from'將索引位置映射爲唯一鍵值？我把map函數改成了'（x，y）=>'，錯誤消失了，但是我真的無法從生成的HTML中判斷它是否工作。 – souldeux

這不是無關緊要的。數組中的元素應該有幫助在[元素協調]（https://facebook.github.io/react/docs/reconciliation.html）中作出反應的鍵，這實際上意味着 - 幫助在重新呈現更少的更新時做出反應。見編輯的答案。 –

哎呀，謝謝！這是我的第一個React項目，該鏈接看起來像我現在應該閱讀的一個。 – souldeux

您可以創建一個數組，其中每個元素的值都是索引，然後將其映射到一個列數組，以便爲每個索引獲取一個新列。使用索引屬性設置列

render: function() { 

    var i= 0, arr = []; 

    // Fill the array with the indexes 
    for (i = 0; i < this.state.numCols; i += 1) { 
     arr[i] = i;   
    } 

    return(
     <div className="kBoard"> 
      I'm a board 
      {arr.map(function(i) { 
       return <kColumn key={i} /> 
      });} 
     </div> 
    ); 
}

來源

2016-08-24 13:56:16

嘗試這個

var kBoard = React.createClass({ 
getInitialState: function() { 
    return {numCols: 0}; 
}, 
componentDidMount: function(){ 
    //simplified 
    this.setState({numCols: 3}); 
}, 
render: function() { 
    return(
     <div className="kBoard"> 
      { 
       this.state.numCols.map(function(result,i) { 
       return <kColumn key={i} />; 
       }) 
      } 
      //TODO: insert columns 
     </div> 
    ); 
} 
});

來源

2016-08-24 14:01:51

如何渲染一個元素（React Class）任意多次？

回答

相關問題