javascript - 使用对象列表中的循环将数据附加到组件

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

您需要映射对象并生成标签的所有组件

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