如何解决在 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 举报,一经查实,本站将立刻删除。