reactjs - react : How to get children as string?

Question

我正在为我们正在构建的几个组件编写文档，所以文档(也是一个 React 组件)看起来像这样:

const myDoc = () => (
  <div>
    <MyComponent title="MyTitle" />
    <code className="language-jsx">
       {`<MyComponent title="MyTitle" />`}
    </code>
  </div>
)

看到 MyComponent 上的重复了吗？所以我创建了“代码”组件来处理这个问题:

const Code = ({ children }) => (
  <div>
    {children}
    <code>
       {children}
    </code>
  </div>
)

那么MyDoc现在是:

const myDoc = () => (
  <Code>
    <MyComponent title="MyTitle" />
  </Code>
)

但是由于 Code 中的 children 是一个对象，它不会呈现为字符串。

有办法实现吗？或者更好的解决方案？

Answer 1

我也在写文档，我也不想每次更改演示时都更改 markdown 文件。我想要类似 element.innerHTML 的等价物。

我偶然发现了这个答案，在进一步搜索中我发现了这个名为 jsxToString 的包在 github 上。

只是提一下，以防其他人也在尝试做文档并且在这篇文章中遇到问题。