[英]Convert a React.element to a JSX string
I am trying to build a component which,我正在尝试构建一个组件,
pre
for documentation sakepre
显示子 DOM One solution is to pass the JSX as a separate prop
as well.一种解决方案是将 JSX 作为单独的
prop
传递。 This makes it repetitive since I am already able to access it through this.props.children
.这使它重复,因为我已经能够通过
this.props.children
访问它。 Ideally, I just need to somehow convert the children
prop as a string
so that I can render it in a pre
to show that "this code produces this result" .理想情况下,我只需要以某种方式将
children
道具转换为string
以便我可以在pre
呈现它以显示“此代码生成此结果” 。
This is what I have so far这是我到目前为止
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>;
}
}
How can I get the a jsx string in the format '<Div className='myDiv'>...</Div>
when I render DocumentationSection as当我将 DocumentationSection 呈现为时,如何以
'<Div className='myDiv'>...</Div>
<DocumentationSection heading='Heading 1'>
<Div className='myDiv'>...</Div>
</DocumentationSection>
Thanks.谢谢。
Edit :编辑:
I tried toString, it dint work, gave [object Object]我试过toString,它起作用了,给了[object Object]
If you want the HTML representation of a React element you can use #renderToString
or #renderToStaticMarkup
.如果你想要 React 元素的 HTML 表示,你可以使用
#renderToString
或#renderToStaticMarkup
。
ReactDomServer.renderToString(<div>p</div>);
ReactDomServer.renderToStaticMarkup(<div>p</div>);
will produce会产生
<div data-reactid=".1" data-react-checksum="-1666119235">p</div>
and和
<div>p</div>
respectively.分别。 You will however not be able to render the parent as a string from within itself.
但是,您将无法将父级从自身内部呈现为字符串。 If you need the parent too then from where you render the parent pass a
renderToString
version of it as props to itself.如果您也需要父级,那么从渲染父级的
renderToString
将它的renderToString
版本作为道具传递给自身。
React.renderToString
is depreciated as of React v0.14.0
, it's recommended to use ReactDOMServer.renderToString
instead. React.renderToString
从React v0.14.0
贬值,建议使用ReactDOMServer.renderToString
代替。
eg例如
import ReactDOMServer from 'react-dom/server'
...
ReactDOMServer.renderToString(YourJSXElement())
You can use react-element-to-jsx-string :您可以使用react-element-to-jsx-string :
import React from 'react';
import reactElementToJSXString from 'react-element-to-jsx-string';
console.log(reactElementToJSXString(<div a="1" b="2">Hello, world!</div>));
// <div
// a="1"
// b="2"
// >
// Hello, world!
// </div>
You can also use the pretty-format package, which is part of Jest, and used by Jest to show the diffs in JSX assertions.您还可以使用漂亮格式包,它是 Jest 的一部分,Jest 使用它来显示 JSX 断言中的差异。
import React from "react";
import prettyFormat from "pretty-format";
import renderer from 'react-test-renderer';
const { ReactTestComponent } = prettyFormat.plugins;
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
console.log(
prettyFormat(renderer.create(<App />), {
plugins: [ReactTestComponent],
printFunctionName: true,
})
);
This will output something like:这将输出如下内容:
<div
className="App"
>
<h1>
Hello CodeSandbox
</h1>
<h2>
Start editing to see some magic happen!
</h2>
</div>
You can try it by yourself in this CodeSandbox: https://codesandbox.io/s/xvxlw370xp您可以在此 CodeSandbox 中自行尝试: https ://codesandbox.io/s/xvxlw370xp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.