reactjs - 在 ReactMarkDown 中渲染 JSX

Question

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

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

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

Answer 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，有什么不同？

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

Answer 2

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

例如：

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