将HTMLElement转换为React Element，并保留所有事件侦听器 [英] Converting HTMLElement to a React Element, and keeping any event listeners

问题描述

使用类似于Vanilla JS的 renderjson （npm包）之类的库，可以轻松地将一些JSON数据呈现到一组可折叠的HTML元素中。

Rendering some JSON data into a set of collapsible HTML elements is EASY using a library like renderjson (npm package) for Vanilla JS

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

---

在反应世界中

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

---

In The react world

However, renderjson returns an HTMLElement, NOT A STRING. Please note that I'm not JUST trying to convert HTML strings into react HTML here. I'm trying to convert the HTMLElement into a real ReactElement.

因此，我实际上设法做到了，但是由于我将HTMLElement解析为字符串，因此由 renderjson 在+和-句柄（用于打开或折叠json）上生成的onClick事件侦听器在此过程中是丢失的。...

So, I actually managed to do this, but since I'm parsing the HTMLElement into a string, all the onClick event listeners generated by renderjson on the + and - handles (to open or collapse the json) are LOST in the process....

是否有人对如何将HTMLElement对象转换为React Element并保留所有原始事件处理程序有任何想法？

Does anyone have any idea on how to convert a HTMLElement object into React Element, keeping all the original event handlers?

我猜，这里的真正问题是：如何将 renderjson 包重新打包以使其变得对React友好？

I guess, the real question here is: how can the renderjson package be "repackaged" to become React friendly?

这里是一个代码框，可让您更轻松地了解我在这里所说的内容。

推荐答案

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

Good question, I keep running into similar issues with non-React JS libraries that return DOM elements. These libraries should be ported to React, but if you don't want to do that, you can use findDomNode() to get a DOM (not React) node, and append your HTMLElement there. Please note that in the official docs, its use is discouraged because "it pierces the component abstraction". Anyways, in your example, you could add a wrapper class:

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

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

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

此操作将呈现 div ，并在安装组件时找到 div 并添加生成的 HTMLElement 在你的图书馆旁边。简单。

what this does is render a div, and when the component mounts it finds the div and adds the HTMLElement generated by your library there. Simple.

在您的 App 中，您可以像这样使用它：

In your App, you can use it like this:

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

这样，您的听众将可以正常工作。

This way your listeners will be working just fine.

Codesandbox不适用于我，但您可以查看演示此处。希望对您有所帮助！

Codesandbox didn't work for me, but you can check a demo here. I hope this helps!

这篇关于将HTMLElement转换为React Element，并保留所有事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！