在 ReactMarkDown 中渲染 JSX

问题描述

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

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

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

解决方法

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

这个组件示例映射到您的子节点，并用 ReactMarkDown 包裹每个子节点。

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>

React.Children.map vs children.map,what's the different?

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

,

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

例如：

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