javascript – 将React.element转换为JSX字符串

我正在尝试构建一个组件,

>带孩子和
>渲染DOM中的子项,以及
>出于文档的目的,在pre中显示子DOM

一种解决方案是将JSX作为单独的prop传递.这使得它重复,因为我已经能够通过this.props.children访问它.理想情况下,我只需要以某种方式将子prop转换为字符串,以便我可以在pre中呈现它以显示“此代码生成此结果”.

这就是我到目前为止所拥有的

class DocumentationSection extends React.Component{
        render(){
           return <div className="section"> 
                    <h1 className="section__title">{heading || ""}</h1> 
                    <div className="section__body"> {this.props.children}</div>
                    <pre className="section__src">
                        //Change this to produce a JSX string from the elements
                        {this.props.children}
                    </pre>
                </div>;
         }  
}

如何以’< Div className ='myDiv'> …< / Div>格式获取jsx字符串？当我将DocumentationSection渲染为

<DocumentationSection heading='heading 1'>
    <Div className='myDiv'>...</Div>
</DocumentationSection>

谢谢.

编辑：

我试过toString,它dint work,给了[object Object]

解决方法

如果您想要React元素的HTML表示,可以使用#renderToString或#renderToStaticmarkup.

React.renderToString(<div>p</div>);
React.renderToStaticmarkup(<div>p</div>);

会产生

<div data-reactid=".1" data-react-checksum="-1666119235">p</div>

和

<div>p</div>

分别.但是,您无法将父级作为字符串从内部呈现.如果您需要父级,那么从您渲染父级的位置传递一个renderToString版本作为其自身的道具.