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

Hi there..."> Hi there..."/> Hi there..."> Hi there...">

JavaScript

卡卡西凯

2020-03-11

这是我尝试过的方法以及解决方法。

这有效：

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

这不是：

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

description属性只是HTML内容的普通字符串。但是由于某种原因，它呈现为字符串，而不是HTML。

有什么建议么？

第823篇《在React组件中将HTML字符串呈现为真实HTML》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

gia 2020.03.11

如果您可以控制{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}
);

GreenGil 2020.03.11

我无法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>);
}