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

标签 reactjs tailwind-css postcss html-react-parser

我无法在 react 中解析 html 内容,这实际上是顺风和 postcss 特定问题,因为我在 codesandbox 上使用了相同的代码在没有顺风 CSS 样式的情况下工作正常。
注:我已经在有和没有顺风的本地计算机上对此进行了测试,我遇到了同样的问题
App.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;
预期输出
enter image description here
实际输出
enter image description here
在react中使用tailwind进行样式设置时,是否有另一种方法将html转换为纯文本

最佳答案

像这样改变你的代码:

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/

关于reactjs - 如何在 Tailwind 和 postcss 中将 Html 内容转换为纯文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69631876/

相关文章:

javascript - React 数据网格自定义格式化程序是否可以与自定义编辑器同时使用?

reactjs - Tailwind 一种任意颜色在写为变量时不起作用

reactjs - 带有 postcss 的 mini-css-extract 插件抛出 this.getOptions 不是一个函数

gulp - PostCSS错误:[object Object]不是PostCSS插件

javascript - React.js 中的粘性侧边栏

javascript - 如何同时过滤和映射数组?

javascript - 有什么方法可以将 immutable.js 与 lodash 一起使用?

ruby-on-rails - Rails 7、tailwind 和 View 组件、添加到组件的类未编译/更新

javascript - 为什么 webpack 别名不起作用?

javascript - 未生成来自 tailwind.config.js 的自定义顺风颜色