將數據附加到組件，並從對象列表中循環

Question

如何將對象列表'標記'中的值添加到我的ReviewTag組件並生成所有標記？

這裏是我的代碼：

var ReviewTag = React.createClass({ 
    render: function() { 
     var tags = [{"id": 1, "name": "friendly"}, {"id": 2, "name": "comfortable"}, {"id": 3, "name": "fast"}]; 
     return (
      <div> 
       <input type="checkbox" id="TAG_ID" name="TAG_NAME"/><label htmlFor="TAG_NAME">Tag name</label> 
      </div> 
     ); 
    } 
}); 

，我想呈現的其他成分的所有標籤，但我不知道如何做到這一點？

<div className="characteristics-column"> 
    <ReviewTag/> //how can I render this tags with data from 'tags' variable ? 
</div> 

非常感謝您的各種幫助解決方案。

Answer 1

使用地圖的陣列和輸出在地圖上的對象，並生成所有組件標籤循環複選框

你可以嘗試這樣的事情：

var Tag = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <input type="checkbox" id="{this.props.id}" name="{this.props.name}"/><label htmlFor="{this.props.name}">{this.props.name}</label> 
      </div> 
     ); 
    } 
}); 

var ReviewTag = React.createClass({ 
    render: function() { 
     var tags = [{"id": 1, "name": "friendly"}, {"id": 2, "name": "comfortable"}, {"id": 3, "name": "fast"}]; 
     const tagComps = tags.map(function(tag){ 
      return <Tag {...tag} />; 
     }) 
     return (
     <div> 
      {tagComps} 
     </div> 
    ); 
    } 
}); 

演示：http://jsfiddle.net/2m819ydb/ 或：

var ReviewTag = React.createClass({ 
    render: function() { 
     var tags = [{"id": 1, "name": "friendly"}, {"id": 2, "name": "comfortable"}, {"id": 3, "name": "fast"}]; 
     const tagComps = tags.map(function(tag){ 
      return <div><input type="checkbox" id="{tag.id}" name="{tag.name}"/><label htmlFor="{tag.name}">{tag.name}</label></div>; 
     }); 
     return (
     <div> 
      {tagComps} 
     </div> 
    ); 
    } 
}); 

React.render(<ReviewTag/>, document.body); 

演示：http://jsfiddle.net/2m819ydb/1/

Answer 2

您需要

// your tag component 
var Tag = React.createClass({ 
    render: function() { 

     return (
      <div> 
       <input type="checkbox" id={this.props.id} name={this.props.name}/><label htmlFor={this.props.name}>{this.props.name}</label> 
      </div> 
     ); 
    } 
}); 

var ReviewTag = React.createClass({ 
    render: function() { 
     var tags = [{"id": 1, "name": "friendly"}, {"id": 2, "name": "comfortable"}, {"id": 3, "name": "fast"}]; 
     const tagComps = tags.map(function(tag){ 
      return <Tag {...tag}>; 
     }) 
     return (
      <div> 
       {tagComps} 
      </div> 
     ); 
    } 
});