Question

是否可以将HTML标记作为属性传递，然后在React.js中进行渲染

例如ES2015语法：

我将该属性添加为带有HTML标记的字符串：

renderItems(posts) {
    var groupDate = this.props.item.date.toUpperCase();
    var listCol = '<h4>' + groupDate.toString() + '</h4>';
    return (<ViewList list={posts} postCol1={listCol}/>);
}

在我的ViewList组件中，我有：

<div className="col-md-9">{this.props.postCol1}</div>

这表现为：

<h4>JANUARY 28TH, 2016</h4>

如何回应呈现除HTML标记之外的日期？

不同的视图使用此组件，标签可能不同，解释了我希望包含标记的原因。

Answer 1

从<h4>字符串中取出listCol个标记。您的ViewList组件应该呈现它们：

<div className="col-md-9">
    <h4>
        {this.props.postCol1}
    </h4>
</div>

Answer 2

这实际上有效：

renderItems(posts) {
     var groupDate = this.props.item.date.toUpperCase();
     return (<ViewList list={posts} postCol1={<h4>{groupDate.toString()}</h4>}/>);
   }

如何在React.js中呈现作为字符串属性传递的Html标记

2 个答案: