javascript - React.js 将多个 json 值传递给一个子参数

Question

我有一个 json 对象:

"tags": ["salmons","kitchenaccident"]

我有一个通过 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>
        );
    }
});

Answer 1

在这一行中:

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

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

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