React-markdown 不渲染 Markdown

Question

我正在使用 React-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}
   />
}

Answer 1

这里的问题是 React-markdown 将 markdown 文本映射到真实的 html 元素，而您正在使用 tailwindcss。

Tailwind 取出所有应用于 html 元素的默认样式。幸运的是，有一个非常简单的解决方法：

.markdown > * {
  all: revert;
}

index.css在包含 tailwind 指令的“ ”文件中创建一个类似的类。之后，只需将“ markdown”放入 ReactMarkdown 组件类中即可。