Question

我从外部来源检索数据，并且说明字段包含一些HTML代码，例如

<p>some text with <a hre="#">link</a></p>

当我渲染价值时，我在屏幕上显示的内容完全如上所述。如何显示纯文本？

  return (
    <div className="col-md-8">
      <div className="details">
        <div>{title}</div>
        <div>{description}</div>
      </div>
    </div>
  );

Answer 1

如果您继续使用Paragraph标签，您将获得计划文本

Answer 2

您应该使用dangerouslySetInnerHTML。它允许您渲染存储为字符串的原始html：

function createMarkup() {
  const description = "<p>some text with <a hre="#">link</a></p>";
  return {__html: description};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

使用render（）无法正确显示HTML代码

2 个答案: