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

Question

如何将对象列表 'tags' 中的值添加到我的 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>
        );
    }
});

Answer 2

使用 map 遍历数组并输出复选框

您可以尝试这样的操作：

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/

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

Append data to component with loop from objects list

javascript

jquery

jsx

reactjs