javascript - 将子 HTML 视为字符串并视为 React 中的 HTML

Question

我正在尝试创建一个组件，它既显示某些包含其他组件的 HTML 的结果，又显示代码本身。基本上，这是一个演示标记并显示使用了哪些标记且子组件完好无损的容器。我遇到的问题是，当我想要尚未解析的文字输入并且仍然包含已使用的任何组件标记时，我似乎只能将完全渲染的 HTML 显示为代码。

<ParentComponent>
    <div></div>
    <ChildComponent></ChildComponent>
    <div></div>
</ParentComponent>

我希望 ParentComponent 既能完全渲染其所有子组件，又能将其中的所有 HTML 视为字符串，本质上，理想情况下无需维护子组件的两个副本。渲染的版本没有问题，这是自然发生的，但是我似乎无法从任何地方获取字符串形式，它获取渲染的版本，其中 ChildComponent 被它渲染的内容替换。

Answer 1

我想这应该适合您的用例。

import React from "react";
import ReactDOM from "react-dom";
import jsxToString from 'jsx-to-string';

const ParentComponent = props => (
  <div>
    {`I'm a ParentComponent`} 
    {props.children}
  </div>
);
const ChildComponent = () => <div>{`I'm a ChildComponent`}</div>;

const getParent = () => <ParentComponent>
  <div />
  <ChildComponent />
  <div />
</ParentComponent>;

function App() {
  return (
    <div className="App">
      {getParent()}
      {jsxToString(getParent())}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

尝试一下。