我正在使用Reaction-Markdown来呈现输入的值.问题是,缩减没有得到应有的处理,例如,如果我使用表达式"#Hello world",文本应该在h1中显示为文本,但它正常显示,并且无法执行其他表达式.

//setDataForm coming from parent 
//const [dataForm, setDataForm] = useState()

const NoteForm = ({setDataForm})=> {
   const handleChange = (e) => {
        const { name, value } = e.target
        setDataForm({
            ...dataForm,
            [name]: value
        })
   }

   <textarea
     placeholder="Description"
     onChange={handleChange}
     name="description"
   ></textarea>

   <ReactMarkdown
     className="w-full h-[100vh] outline-none"
     children={dataForm?.description}
     remarkPlugins={[remarkGfm]}
     escapeHtml={false}
   />
}

推荐答案

这里的问题是,Reaction-markdown将markdown文本映射到真正的html元素,而您使用的是tawincss.

tailwind go 掉了应用于html元素的所有默认样式.幸运的是,有一个非常简单的解决方法:

.markdown > * {
  all: revert;
}

在包含tailwind 指令的"index.css"文件中创建一个类似这样的类.在此之后,只需在ReactMarkdown组件类中放入"markdown",就可以了.

Reactjs相关问答推荐

Reaction路由的问题-在Effect使用API调用响应设置状态之前呈现页面

For循环中的元素在Reaction中丢失挂钩

使用 React + Vite 范围化 CSS

我无法通过 useContext 显示值

画布:用鼠标绘制形状时重新绘制整个画布会导致卡顿

useRef 不关注模态

为什么这个 React 组件会导致无限渲染?

从 React 应用程序调用未经身份验证的 graphql 查询时出现错误:没有当前用户

使用状态与复选框不同步

为嵌套路由配置一个不存在的 url 的重定向

如何禁用 redux-toolkit 的不可序列化值测试警告?

如何在 ChartJS 中操作 Y 轴

@react-three/postprocessing 没有匹配的从 three.module.js 导出以导入WebGLMultisampleRenderTarget

如何通过 React JS 中的映射将新元素添加到对象数据数组中

从其他组件切换 FieldSet

如何向 surveyjs 调查添加多个结尾?

使用输入类型文本对 useState 和日期做出react

为什么我在此代码段中看不到 useEffect for count = 1?

react-admin useGetIdentity 只返回全名,id 未定义 头像未定义

您无权使用阻止 webRequest 侦听器.请务必在 list 中声明 webRequestBlocking 权限