有没有办法将 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} /> }}
    />
  )
}

渲染器的官方定义如下：

Renderers - object An object where the keys represent the node type and the value is a React component. The object is merged with the default renderers. The props passed to the component varies based on the type of node.

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

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

Is there a way to pass a className to a component in react-markdown?

html

javascript

markdown

jsx

reactjs