时间戳

首页 > 解决方案 > 显示编辑/样式化的文本 - 反应

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

问题描述

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

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

发布图片以供参考

在此处输入图像描述

在此处输入图像描述

标签： node.jsreactjsstyles

解决方案

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

我不建议这样做...

发生这种情况的原因是因为 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>

推荐阅读