在 ReactMarkDown 中渲染 JSX

Question

如何在 ReactMarkDown 中渲染 JSX？我想将我的 JSX 元素包装在 ReactMarkDown 组件中并实现这样的效果，

  <ReactMarkdown>
    <Grid>
      {Some text}
    </Grid>
    <Grid>
      {Some text}
    </Grid>
 </ReactMarkdown>

最好的方法是什么而不是在每个 JSX 元素中多次使用 <ReactMarkdown>？

Answer 1

您可能想要创建自定义组件。

此组件示例映射到您的 children 节点，并用 ReactMarkDown 包装每个 child。

https://reactjs.org/docs/react-api.html#reactchildrenmap

const MarkdownPlus = ({ children }) => (        
    React.Children.map(children, child => (
       <ReactMarkdown>
              {React.cloneElement(child, {})}
       </ReactMarkdown>
    )))
);

然后像这样使用它

 <MarkdownPlus>
    <Grid>
      {Some text}
    </Grid>
    <Grid>
      {Some text}
    </Grid>
 </MarkdownPlus>

免责声明：我不确定 ReactMarkdown 是否接受 <Grid> 作为 child。如果它只接受纯文本（降价代码），那么上面的代码将不起作用。您需要将 <ReactMarkDown> 应用到每个 <Grid>.

Answer 2

你可以看看MDX，它可以让你同时使用 JSX 和 markdown。

例如：

<Grid>
  # heading
</Grid>
<Grid>
  *italic*
</Grid>

在 ReactMarkDown 中渲染 JSX

Render JSX inside ReactMarkDown

markdown

reactjs

react-hooks

react-markdown