reactjs - 如何在 Tailwind 和 postcss 中将 Html 内容转换为纯文本

Question

我无法在反应中解析 html 内容，这实际上是顺风和 postcss 特定的问题，因为我在代码和框上使用了相同的代码，在没有顺风 CSS 样式的情况下工作正常。

注意：我已经在有和没有顺风的本地计算机上对此进行了测试，我遇到了同样的问题

应用程序.js

import React, { useState } from 'react';
import parse from 'html-react-parser';

const App = () => {
  const [text, setText] = useState('<p>asdfsadf</p><ul><li>asdfsdf</li><li>sdcas</li></ul>');
  return (
    <div className="m-10">{parse(text)}</div>
  );
};

export default App;

预期产出

实际输出

在使用tailwind进行样式设置时是否有另一种方法可以将html转换为纯文本

标签： reactjstailwind-csspostcsshtml-react-parser

Answer 1

像这样更改您的代码：

import React, { useState } from 'react';

const App = () => {
  const [text, setText] = useState(
    '<p>asdfsadf</p><ul><li>asdfsdf</li><li>sdcas</li></ul>'
  );
  return <div className="m-10" dangerouslySetInnerHTML={{ __html: text }} />;
};

export default App;

结果https://react-v29quj.stackblitz.io/