如何在 React 中获取子源代码？答案

【问题标题】：How can I get children source code in React?如何在 React 中获取子源代码？
【发布时间】：2020-07-15 15:21:48
【问题描述】：

react 有可能得到 children 的 prop 源码吗？

例如，我有带有某种代码的组件...

<SomeComp>
    <Heading>I need this code with Heading tag</Heading>
</SomeComp>

如何将孩子作为字符串？

我需要这样的东西......

const SomeComp = ({ children }) => {
    const highlightedCode = highlight(CHILDREN_TO_SOURCE_STRING_FUNCTION(children))
    return (
        <>
            <div>{highlightedCode}</div>
            <div>{children}</div>
        </>
    )
}

谢谢帮助

【问题讨论】：

这里的用例是什么？
这能回答你的问题吗？ React: How to get children as string?
欢迎来到 StackOverflow！这是一个重复的问题stackoverflow.com/questions/39799288/…。话虽如此，您可能可以重构您的组件树，因此这不是必需的。例如，SomeComp 的父组件可能会应用突出显示的代码。如果您分享更多代码/意图，有人可能会提供帮助。

标签： javascript reactjs children

【解决方案1】：

不确定您在这里真正想要实现什么，但这是您可以做到的。

<SomeComp>
  {`<Heading>I need this code with Heading tag</Heading>`}
</SomeComp>

【讨论】：