显示编辑/样式化的文本 - 反应

Question

我正在构建一个用于发布公告的网络应用程序。用户可以使用富文本编辑器，这意味着他可以将字母加粗、加下划线等等。然后，我将此文本与我的 mongodb 数据库中的描述“内容”保存为字符串。每个帖子都有标题和内容。当我显示帖子而不是显示“此文本很强大”时，它会显示“此文本很强大”。 （在 中添加了一个空格，否则它会变得很强大。你明白我的意思：P）显然这不仅发生在强的情况下，而且发生在所有的编辑中。例如在段落中它像这样

段落

等等。

我如何才能将内容显示为应有的（样式），而不仅仅是没有编辑和样式的字符串？也许这是我将它作为字符串存储在我的数据库中的事实？但是我应该将它存储为什么类型？

张贴图片供参考

Answer 1

老实说，允许这样做是非常危险的——你必须非常小心你允许什么以及如何清理输入（不允许脚本标签等）..

我不建议这样做...

发生这种情况的原因是因为 React 正在为您清理输入（本质上将任何 html 转换为纯字符串 - 不是真正的清理，但您明白了）...如果您想呈现用户输入的 HTML，您有使用dangerouslySetInnerHTML - 它必须以以下格式呈现：{ __html: '<p>The Dangerous HTML</p>' }

const { useState, dangerouslySetInnerHTML } = React;
const { render } = ReactDOM;

function App() {
  const [html, setHtml] = useState();
  
  const handleChange = event => {
    setHtml({ __html: event.target.value});
  }
  
  return (
    <div>
      <h3>Enter some html</h3>
      <input onChange={handleChange} type="text" /> 
      {html && <div dangerouslySetInnerHTML={html} />}
    </div>
  );
}

render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>