React.js 将多个 json 值传递给一个子参数答案

【问题标题】：React.js pass multiple json values to one child parameterReact.js 将多个 json 值传递给一个子参数
【发布时间】：2016-03-16 23:23:40
【问题描述】：

我有一个 json 对象：

“标签”：[“鲑鱼”，“厨房事故”]

我有一个通过 JSON 解析的组件..

var entryNodes = this.props.data.data.map(function(entry) {
       return (
         <EntryComponent
             id={entry.user.id}
             img={entry.images.thumbnail.url}
             likes={entry.likes.count}
             link={entry.link}
             username={entry.user.username}
             caption={entry.caption.text}
             tag={entry.tags}/>
       );

但是，它以一个连接字符串的形式传递：salmonskitchenaccident。

如果我希望它呈现为“#salmons #kitchenaccident”.. 最好的解决方案是什么。

var EntryComponent = React.createClass({
render: function() {
    return(
            <div className="entry">
                <div className="entry-left">
                    <img className="img-rounded" src={this.props.img} />
                    <div className="like-section">
                        <img className="heart" src="./img/heart.png" />
                        <span className="likes">{this.props.likes}</span>
                    </div>
                </div>
                <div className="entry-right">
                    <h4><a href={this.props.link}>{this.props.username}</a>    </h4>
                    <p>{this.props.caption}</p>
                    <p className="hash">{this.props.tag}</p>
                </div>
            </div>
        );
    }
});

【问题讨论】：

这看起来不错，但我们需要查看您的EntryComponent 源代码。
@ffxsam 我更新了。

标签： javascript json reactjs

【解决方案1】：

在这一行：

<p className="hash">{this.props.tag}</p>

您尝试立即显示一个数组，这会隐式调用tags 数组的toString() 方法。您需要将数组中的项目map 发送到 HTML 节点，如下所示：

<p className="hash">{this.props.tag.map( tag => (<span>{ '#' + tag }</span>) }</p>

【讨论】：