I am writing documentation for a a couple of components we are building, so the doc (which is also a react component looks like this:
const myDoc = () => (
<div>
<MyComponent title="MyTitle" />
<code className="language-jsx">
{`<MyComponent title="MyTitle" />`}
</code>
</div>
)
See the duplication on MyComponent? So I created the "Code" Component to handle that:
const Code = ({ children }) => (
<div>
{children}
<code>
{children}
</code>
</div>
)
Then MyDoc now is:
const myDoc = () => (
<Code>
<MyComponent title="MyTitle" />
</Code>
)
But since children inside Code is a object, it will not render as string.
Is there a way to achieve this? Or maybe a better solution?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…