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

debugcn 发表于 Dev

罗布森

如何将对象列表“标签”中的值添加到我的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>

非常感谢您提供的每个帮助解决方案。

马达里尼瓦斯库

使用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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。