如何让带有 HTML 标签的字符串在 React js 中呈现？

Question

我正在使用 Reactjs 和 Django 在我的网站上工作。我在 Django admin 中有 WISYWIG eidtor，所以当我发布带有文本装饰的帖子时，它会与 HTML 标签一起存储。

在 React 中，我从 Django REST framework 获取 API 以获取帖子。当我在 React 中渲染字符串数据时，它只显示 HTML 标签。

例如，

Django Admin 我存储你好，世界！它存储为<b>Hello, world!</b>. 然后，我用它制作 API。

在反应中，

我取了API，呈现在阵营组成部分，但它只是显示了类似<b>Hello, world!</b>的insteand你好，世界！.

我应该使用任何模块来渲染它吗？

更新

这是我遇到问题的代码。

{storeList.map(store => {
  return (
    <Card className={classes.card} key={store.id}>
      <CardBody>
        <div className={classes.cardBody}>
          <h6 className={classes.cardSubtitle}>
            {store.shortDesc} <-- This part has the problem
          </h6>
        </div>
      </CardBody>
    </Card>
  );
})}

Answer 1

您可能需要提供更多关于您的实际问题的背景信息，但我会冒险尝试提供帮助。如果您有一个包含 HTML 标签的字符串，那么在渲染时，请使用危险的SetInnerHtml属性

return <div dangerouslySetInnerHTML={{ __html: yourStringWithHtmlInIt }} />;

这将然后属性呈现 HTML。有关更多信息，请参阅https://reactjs.org/docs/dom-elements.html

编辑：

{storeList.map(store => {   return (
    <Card className={classes.card} key={store.id}>
      <CardBody>
        <div className={classes.cardBody}>
          <h6 className={classes.cardSubtitle}>
             <div dangerouslySetInnerHTML={{ __html: store.shortDesc }} />;
          </h6>
        </div>
      </CardBody>
    </Card>   ); })}