javascript - 在 React 中访问 HTMLElement Setter，并作为 customElement 加载？

Question

作为参考，我正在尝试为 React 中的 Home Assistant 创建一个自定义面板：https ://developers.home-assistant.io/docs/frontend/custom-ui/creating-custom-panels/

访问 HTMLElement Setter

有没有办法在 React 本身中访问 HTML Setter？目前，我将数据存储在 setter 中，然后将其传递给 React Element。但问题是每次调用 Setter 时，它都会重新渲染我的整个 React 应用程序。不理想。

这是它目前的做法：

import React from 'react'
import ReactDOM from 'react-dom'

// Small helper function to generate custom elements that will render the passed
// in React component and forwards the Home Assistant panel properties.
export default (ReactPanel) =>
    class extends HTMLElement {
        constructor() {
            super()
            this._renderScheduled = null

            // Initialize properties as `null` and create setters that triggers a render
            const props = {}
            ;['hass', 'showMenu', 'narrow', 'panel'].forEach((prop) => {
                const key = `_${prop}`
                this[key] = null
                props[prop] = {
                    set(value) {
                        this[key] = value
                        this._render()
                    },
                }
            })
            Object.defineProperties(this, props)
        }

        disconnectedCallback() {
            ReactDOM.unmountComponentAtNode(this)
        }

        _render() {
            if (this._renderScheduled !== null) return

            this._renderScheduled = Promise.resolve().then(() => {
                this._renderScheduled = null
                ReactDOM.render(
                    React.createElement(ReactPanel, {
                        hass: this._hass,
                        showMenu: this._showMenu,
                        narrow: this._narrow,
                        panel: this._panel,
                    }),
                    this
                )
            })
        }
    }

有谁知道我可以从我的 React 应用程序本身中从这些 Setter 获取数据的方法吗？这样我就可以在内部处理它们，而不会像上面的代码那样导致整个应用程序重新渲染

将 React App 传递给 customElement.define()

如果我实现了上述目标，我该如何将这个应用程序加载到 customElement.define() 中？

标签： javascriptreactjsdomgetter-setter