Javascript 使用数据数组创建多个类似组件

我有一个json文件，其中包含表示人的数据数组

我想每人制作一个组件。我应该在渲染函数内创建一个组件并循环遍历数据，还是应该在ReactDOM.render函数外循环并在每个循环中传入特定的数据段

我是否应该这样做：

var PersonBox = React.createClass({
  render: function() {
    var person = this.props.data.map(function(person, index) {
          return <div id="person" key={index}>
                 // person stuff here
                  </div>
        });
        return (
                <div>
                  {person}
                </div>
              );
  }

ReactDOM.render(<PersonBox data={mydata} />, document.getElementById('container'));

var PersonBox=React.createClass({
render:function（）{
var person=this.props.data.map（函数（person，index）{
返回
//这里有个人的东西
});
返回(
{个人}
);
}
ReactDOM.render（，document.getElementById（'container'））；

或者我应该这样做：

var PersonBox = React.createClass({
  render: function() {
        return (
                <div>
                  // person stuff
                </div>
              );
  }  

mydata.map(function(person, index) {
        ReactDOM.render(<PersonBox data={person} />, document.getElementById('container'));
}

var PersonBox=React.createClass({
render:function（）{
返回(
//个人资料
);
}  
mydata.map（函数（个人，索引）{
ReactDOM.render（，document.getElementById（'container'））；
}

您应该使用第一个变量。您可以将代码拆分为小组件，例如，您可以将代码拆分为两个组件，如下所示

var Person = React.createClass({
  render: function() {
    return <div>
      Name is <strong>{ this.props.name }</strong>
    </div>
  }
});

var PersonBox = React.createClass({
  render: function() {
    var people = this.props.data.map(function(person, index) {
      return <Person key={ index } name={ person.name } />  
    });

    return <div>{ people }</div>
  }
}); 

var Person=React.createClass({
render:function（）{
返回
名称为{this.props.Name}
}
});
var PersonBox=React.createClass({
render:function（）{
var people=this.props.data.map（函数（person，index）{
返回
});
返回{people}
}
});