reactjs - 将 HTMLElement 转换为 React Element，并保留任何事件监听器

Question

使用像 Vanilla JS 的 renderjson (npm 包)这样的库，将一些 JSON 数据渲染成一组可折叠的 HTML 元素是很容易的

const data = { sample: [1, 2, 3, 4], data: { a: 1, b: 2, c: ["hello", null] } };
const rjson = renderjson(data);
document.getElementById('to-render').append(rjson);

<小时/>

在 react 世界

但是，renderjson 返回 HTMLElement，而不是字符串。请注意，我在这里不仅仅是尝试将 HTML 字符串转换为 React HTML。我正在尝试将 HTMLElement 转换为真正的 ReactElement。

所以，我实际上设法做到了这一点，但由于我将 HTMLElement 解析为字符串，所以 + 和 - 句柄上的 renderjson 生成的所有 onClick 事件监听器(用于打开或折叠json)在这个过程中丢失了......

有人知道如何将 HTMLElement 对象转换为 React Element，并保留所有原始事件处理程序吗？

<小时/>

我想，这里真正的问题是:如何将 renderjson 包“重新打包”以变得对 React 友好？

Here is a codesandbox to make it easier to see what I'm talking about here.

Answer 1

好问题，我不断遇到返回 DOM 元素的非 React JS 库的类似问题。这些库应该移植到 React，但如果您不想这样做，可以使用 findDomNode()获取 DOM(不是 React)节点，并在其中附加您的 HTMLElement 。请注意，在官方文档中，不鼓励使用它，因为“它穿透了组件抽象”。无论如何，在您的示例中，您可以添加一个包装类:

class JsonTreeWrapper extends Component {
  componentDidMount() {
    const renderedJson = renderjson(this.props.data);

    const container = findDOMNode(this);
    container.appendChild(renderedJson);
  }

  render() {
    return <div/>;
  }
}

它的作用是渲染一个 div，当组件安装时，它会找到 div 并在其中添加由您的库生成的 HTMLElement 。简单。

在您的应用程序中，您可以像这样使用它:

class App extends Component {
  render() {
    return (
      <div>
        <h1> Inside the react world </h1>
        <JsonTreeWrapper data={data}/>
      </div>
    );
  }
}

这样您的听众就会正常工作。

Codesandbox 不适合我，但你可以查看演示 here 。我希望这有帮助!