我正在尝试构建一个组件,
>带孩子和
>渲染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版本作为其自身的道具.
