Рендеринг JSX внутри ReactMarkDown

Question

Как рендерить JSX внутри ReactMarkDown? Я хочу обернуть свои 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 и children.map, в чем разница?

Отказ от ответственности: я не уверен, принимает ли ReactMarkdown как дочерний элемент или нет. Если он принимает только простой текст (код уценки), то приведенный выше код не будет работать. Вам нужно будет подать заявку <ReactMarkDown> для каждого <Grid>.

Answer 2

Вы можете взглянуть на MDX, он позволяет вам использовать JSX и уценку вместе.

Например:

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