有没有办法将 className 传递给 react-markdown 中的组件？

Question

我正在尝试将 className 传递给 react-markdown 中的组件。

例如，

<ReactMarkdown source='test' />

会导致

<p>test</p>

我怎样才能到达

<p className='testClass'>test</p>

Answer 1

您可以尝试使用ReactMarkdown库中的renderers属性。

尝试以下操作：

const CustomParagraph = ({ children }) => <p className="testClass">{children}</p>

const Markdown = () => {
  return (
    <ReactMarkdown
      source="test"
      renderers={{ paragraph: (props) => <CustomParagraph {...props} /> }}
    />
  )
}

这是渲染器的官方定义：

渲染器- object 一个 object，其中键表示节点类型，值是 React 组件。 object 与默认渲染器合并。 传递给组件的 props 因节点类型而异。

https://github.com/rexxars/react-markdown