Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.2k views
in Technique[技术] by (71.8m points)

reactjs - React: How to get children as string?

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I was also writing documentation and I also didn't want to change the markdown files every time I change demo. I wanted something like element.innerHTML equivalent.

I stumbled upon this answer and on further searching I found this package called jsxToString in github.

Just mentioning in case someone else is also trying to do documentation and stumbles in this post.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...