0

我正在尝试创建一个组件，该组件既显示包含其他组件的某些 HTML 的结果，又显示代码本身。基本上，一个演示标记并显示与子组件一起使用的标记的容器原封不动。我遇到的问题是，当我想要尚未解决的文字输入并且仍然包含任何已使用的组件标签时，我似乎只能将完全呈现的 HTML 显示为代码。

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

我希望 ParentComponent 既能完全呈现它的所有子元素，又能将其中的所有 HTML 视为一个字符串，基本上，理想情况下不维护两个子元素的副本。渲染的版本没有问题，这很自然，但是我似乎无法从任何地方抓取的字符串形式，它获得了渲染的版本，其中 ChildComponent 被它渲染的内容替换。

4

1 回答 1

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

试试看。

于 2018-06-21T17:10:39.523 回答