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

问题描述

作为参考，我正在尝试为 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() 中？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）