背景:我将自定义元素导出成了 React 组件,让 React 项目轻松使用自定义元素。
但问题是,如果使用 SSR ,React 在进行水合时并不会为自定义元素设置 Properties ,这导致自定义元素不能正常工作,例如: https://nextjs-learn-phi-henna.vercel.app/ce-test
- 颜色选择器不能改,因为事件没有注册上去
- 卡片的标题没有显示,因为标题不是 attribute 而是作为 property 定义的(这在自定义元素中是很常见的,比如 table 这样的复杂元素,数据不可能用 attribute 表示)
点击 “← Back to home” 回到首页再点击 “Custom Element Test” 回到这个页面时,自定义元素正常工作了,因为这时候使用了客户端渲染。
我尝试在 hydrateInstance 中添加 setInitialProperties 可以解决这个问题:
function hydrateInstance(instance, type, props, hostContext, internalInstanceHandle, shouldWarnDev) {
...
// 水合时立即为自定义元素设置 properties
if (isCustomElement(type)) {
setInitialProperties(instance, type, props);
}
}
这是适合的解决方案吗(我没有通篇阅读 React 源代码)?如果可以的话我应该去哪个 React 社区提这个建议,因为我使用的是 react@experimental,并不是 React 正式版。