Javascript 将React.element转换为JSX字符串

我正在尝试构建一个组件

带着孩子和孩子

在DOM中呈现子对象，并且

为便于文档编制，在

pre

中显示子DOM

一种解决方案是将JSX作为一个单独的

prop

传递。这使得它重复，因为我已经能够通过

This.props.children

访问它。理想情况下，我只需要以某种方式将

子类

属性转换为

字符串

，这样我就可以在

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>;
         }  
}

类文档部分扩展了React.Component{
render（）{
返回
{标题| |”“}
{this.props.children}
//更改此选项以从元素生成JSX字符串
{this.props.children}
;
}  
}

当我将DocumentationSection呈现为

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

...

谢谢

编辑：

---

我尝试尝试尝试字符串，但效果不佳，如果您想要React元素的HTML表示，可以使用

\renderToString

或

\renderToStaticMarkup

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

React.renderString（p）；
React.renderToStaticMarkup（p）；

将产生

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

p

及

p

分别。但是，您将无法从父对象内部将其呈现为字符串。如果您也需要父对象，则从渲染父对象的位置将其

renderToString

版本作为道具传递给自身

您可以使用：

从“React”导入React；
从“react元素到jsx字符串”导入reactElementToJSXString；
log（reactElementToJSXString（你好，world！））；
// 
//你好，世界！
// 

您还可以使用这个包，它是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,
    })
);

从“React”导入React；
从“prettyFormat”导入prettyFormat；
从“反应测试渲染器”导入渲染器；
const{ReactTestComponent}=prettyFormat.plugins；
函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}
console.log(
prettyFormat（renderer.create（
React.renderToString
自
React v0.14.0
起折旧，建议改用
ReactDOMServer.renderToString
）

e、 g

嗯，很好。我可以得到一个HTML表示。但是我也可以得到JSX吗？确切的props.children元素作为字符串。不是以内置方式，不，github上有几个项目将接受JSX并将其输出为字符串。
React.renderToString
是不推荐的，因为React 0.14.0，请使用
ReactDomServer.renderToString相反。
ReactDOMServer
可以这样导入：
import ReactDOMServer from'react dom/server'；
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>

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,
    })
);

<div
  className="App"
>
  <h1>
    Hello CodeSandbox
  </h1>
  <h2>
    Start editing to see some magic happen!
  </h2>
</div>

import ReactDOMServer from 'react-dom/server'
...
ReactDOMServer.renderToString(YourJSXElement())