在 ReactMarkDown 中渲染 JSX答案

【问题标题】：Render JSX inside ReactMarkDown在 ReactMarkDown 中渲染 JSX
【发布时间】：2021-07-31 15:44:26
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs react-hooks markdown react-markdown

【解决方案1】：

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

此组件示例映射通过您的子节点，并用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>。

【讨论】：

我认为只接受纯文本。

【解决方案2】：

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

例如：

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

【讨论】：