请教一个 React SSR 和自定义元素互操作的问题
594mantou · mantou132 · 2023-12-07 14:17:41 +08:00 · 864 次点击这是一个创建于 375 天前的主题，其中的信息可能已经有所发展或是发生改变。
背景：我将自定义元素导出成了 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 正式版。
 |
1
594mantou OP |
 |
2
theprimone 358 天前
之前我有想法尝试 custom element ，但是想想会不会 SSR 问题不小，所以 OP 解决 SSR 问题了吗？
|
|
3
594mantou OP @theprimone 没有，在等 React 更新 19 。另外，我生成 React 组件的时候添加了一些代码解决了水合的问题。
https://duoyun-ui.gemjs.org/zh/guide/integrate#react 在 SSR 项目中使用自定义元素应该也是可以的，基本布局都是 div ，只有一些按钮、弹窗之类的组件不会破坏布局。 依赖 `:defined` 伪类也能保证不会破坏页面 如果整个页面都是自定义元素（有 ShadowDOM ），还想要 SSR 的话只能依赖声明式 ShadowDOM 自己做了，市面上应该有预渲染之类的方案，用 jsdom 模拟生成 ShadowDOM 理论上也行。 |
|
5
theprimone 353 天前
@594mantou #3 那我怎么有个印象好像很早的 React 文档就在说 custom element 的问题了，意思是以前一直都只是支持客户端渲染而已吗 😂
|
|
6
594mantou OP |
Select Language