Question

我有一个json对象：

＆＃34;标签＆＃34;：[＆＃34; salmons＆＃34;，＆＃34; kitchenaccident＆＃34;]

我有一个可以解析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＆＃39;那么什么是最佳解决方案。

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>

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

1 个答案: