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

Question

Is it possible to pass HTML tags as properties and then render in React.js

For example ES2015 syntax:

I add the property as a string with HTML tags:

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

And in my ViewList component I have:

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

This is rendered as :

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

How do I get react to render the date excluding the HTML tags?

Different views uses this component and tags may be different explaining why I would like to include the tag.

Answer 1

Take the <h4> tags out of the listCol string. Your ViewList component should render them:

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

Answer 2

This actually worked:

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