在React组件中将HTML字符串呈现为真实HTML

如果您可以控制{this.props.match.description}并且使用的是JSX。我建议不要使用“ dangerouslySetInnerHTML”。

// In JSX, you can define a html object rather than a string to contain raw HTML
let description = <h1>Hi there!</h1>;

// Here is how you print
return (
    {description}
);

我无法npm build与之合作react-html-parser。但是，就我而言，我能够成功使用https://reactjs.org/docs/fragments.html。我要求显示一些html unicode字符，但不应将其直接嵌入JSX中。在JSX中，必须从组件的状态中选择它。组件代码段如下所示：

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

您只使用React的危险的SetInnerHTML方法

<div dangerouslySetInnerHTML={{ __html: htmlString }} />

或者，您可以通过这种简单的方法实现更多功能：在React应用程序中呈现HTML原始文件