React.element를 JSX 문자열로 변환합니다.

React.element를 JSX 문자열로 변환합니다.

부품을 만들려고 하는데

1. 아이를 데리고
2. DOM에 있는 아이를 렌더링하고
3. 의 하위 DOM 을 표시합니다.pre증빙을 위해서

한 가지 해결책은 JSX를 별도로 통과시키는 것입니다.prop뿐만 아니라.이 경우 이미 를 통해 액세스할 수 있기 때문에 반복됩니다.this.props.children이상적으로, 나는 단지 어떤 식으로든 변환이 필요하다.children로서 지지하다.string그래서 내가 그것을 그림으로 그릴 수 있다.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>;
         }  
}

형식의 jsx 문자열을 가져오려면 어떻게 해야 합니까?'<Div className='myDiv'>...</Div>DocumentationSection을 렌더링할 때

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

감사해요.

편집:

toString을 시도했지만 작동했고 [객체]를 지정했습니다.

리액트 요소를 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그 자체로 소품인 것 같아요.

React.renderToString현재 감가상각되어 있다React v0.14.0, 를 사용하는 것을 권장합니다.ReactDOMServer.renderToString대신.

예

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

react-element-to-jsx 스트링을 사용할 수 있습니다.

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>

Jese의 일부인 pretty-format 패키지를 사용하여 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>

이 Code Sandbox에서는 직접 사용해 볼 수 있습니다.https://codesandbox.io/s/xvxlw370xp

언급URL : https://stackoverflow.com/questions/34114679/convert-a-react-element-to-a-jsx-string