在 React 中将子 HTML 视为字符串和 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);

试一试。

在 React 中将子 HTML 视为字符串和 HTML

Treating child HTML as a string and as HTML in React

javascript

reactjs

react-component