Javascript 将 React.element 转换为 JSX 字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34114679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert a React.element to a JSX string
提问by Bhargav Ponnapalli
I am trying to build a component which,
我正在尝试构建一个组件，
- Takes children and
- Renders the children in the DOM and also,
- Shows the children DOM in a
prefor documentation sake
- 带孩子和
- 渲染 DOM 中的子项，并且，
pre为了文档，在 a 中显示子 DOM
One solution is to pass the JSX as a separate propas well. This makes it repetitive since I am already able to access it through this.props.children. Ideally, I just need to somehow convert the childrenprop as a stringso that I can render it in a preto show that "this code produces this result".
一种解决方案是也将 JSX 作为单独的对象传递prop。这使它重复，因为我已经能够通过this.props.children. 理想情况下，我只需要以某种方式将children道具转换为 a ，string以便我可以将其呈现在 a 中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
'<Div className='myDiv'>...</Div>当我将 DocumentationSection 呈现为时，如何以格式获取 jsx 字符串
<DocumentationSection heading='Heading 1'>
<Div className='myDiv'>...</Div>
</DocumentationSection>
Thanks.
谢谢。
Edit:
编辑：
I tried toString, it dint work, gave [object Object]
我试过toString，它起作用了，给了[object Object]
回答by Henrik Andersson
If you want the HTML representation of a React element you can use #renderToStringor #renderToStaticMarkup.
如果你想要一个 React 元素的 HTML 表示，你可以使用#renderToString或#renderToStaticMarkup。
React.renderToString(<div>p</div>);
React.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 renderToStringversion of it as props to itself.
分别。但是，您将无法将父级从自身内部呈现为字符串。如果您也需要父级，那么从渲染父级的位置将renderToString它的一个版本作为道具传递给自身。
回答by themouette
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>
回答by Fran?ois Zaninotto
You can also use the pretty-formatpackage, 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
回答by Charlie Ward
React.renderToString is depreciated as of React 0.14.0, instead it's recommended to use ReactDOMServer.renderToString instead.
React.renderToString 从 React 0.14.0 开始折旧，建议改用 ReactDOMServer.renderToString。
e.g
例如
import ReactDOMServer from 'react-dom/server'
...
React.renderToString(YourJSXElement())
