如何渲染一个元素（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）任意多次？

回答

相关问题