将 React.element 转换为 JSX 字符串

IT技术 javascript reactjs
2021-05-05 03:42:22

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

  1. 带孩子和
  2. 渲染 DOM 中的子项，并且，
  3. pre为了文档，在 a 中显示子 DOM

一种解决方案是也将 JSX 作为单独的对象传递prop。这使它重复，因为我已经能够通过this.props.children. 理想情况下，我只需要以某种方式将childrenprop转换为 astring以便我可以将其呈现在 a 中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>当我将 DocumentationSection 呈现为时，如何以格式获取 jsx 字符串

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

谢谢。

编辑：

我试过toString，它起作用了，给了[object Object]

4个回答

如果你想要一个 React 元素的 HTML 表示，你可以使用#renderToString或#renderToStaticMarkup。

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

会产生

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

和

<div>p</div>

分别。但是，您将无法将父级呈现为自身内部的字符串。如果您也需要父级，那么从渲染父级的位置将renderToString它的一个版本作为props传递给自身。

React.renderToString已折旧React v0.14.0，建议ReactDOMServer.renderToString改用。

例如 

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

您可以使用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>

您还可以使用漂亮格式包，它是 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,
    })
);

这将输出如下内容：

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

您可以在此 CodeSandbox 中自行尝试：https ://codesandbox.io/s/xvxlw370xp

其它你可能感兴趣的问题
上一篇检查react-router路径是否处于活动状态 下一篇编写 G 代码：在打印开始时滑动