1

人を表すデータの配列を含むjsonファイルがあります。

1人1台の部品を作りたい。コンポーネントを作成し、render 関数内でデータをループする必要がありますか?それとも、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() {
        return (
                <div>
                  // person stuff
                </div>
              );
  }  

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

1 に答える 1

1

最初のバリアントを使用する必要があります。コードを小さなコンポーネントに分割できます。たとえば、コードを次のように 2 つのコンポーネントに分割できます。

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

Example

于 2016-05-11T17:55:05.583 に答える