reactjs - 如何使用 React 将数据插入到影子 dom 中?
问题描述
我正在尝试使用 React 将数据插入到影子 dom 中。
下面的代码曾经可以工作,但是当对其他代码进行“不相关”的更改时,它就停止了工作。我认为问题在于该组件现在(与以前相比)只运行一次。在此运行中,shadowHost 为空,因此未附加 shadowRoot。
什么是使这项工作的合理方法?
import React, { useRef } from "react";
export enum ViewerStyle {
Svg = "svg",
ProcessedSvg = "processedsvg",
}
type Props = {
serialized: string;
viewerStyleModifier: ViewerStyle;
};
export default function SvgImageViewer(props: Props) {
const { serialized, viewerStyleModifier: xmlType } = props;
if (!serialized) {
return <div className={`viewer viewer--${xmlType}`}></div>;
}
const shadowHost = useRef<HTMLDivElement>(null);
let shadowRoot: ShadowRoot | null = null;
if (shadowHost.current instanceof HTMLElement && !shadowHost.current.shadowRoot) {
shadowRoot = shadowHost.current.attachShadow({ mode: "open" });
}
if (shadowRoot instanceof ShadowRoot) {
shadowRoot.innerHTML = `
<div class="viewer viewer--${xmlType}">
${serialized}
</div>
`;
}
return <div ref={shadowHost}></div>;
}
解决方案
您应该创建一个效果(在安装组件时运行)以将数据插入到影子根中。效果应该依赖于serialized
运行(这意味着每当serialized
更改其值时,效果都会运行并用新值替换影子根serialized
)
export default function SvgImageViewer(props: Props) {
const { serialized, viewerStyleModifier: xmlType } = props;
const shadowHost = useRef<HTMLDivElement>(null);
React.useEffect(() => {
if (serialized) {
const shadowRoot = shadowHost.current.attachShadow({mode: "open"});
shadowRoot.innerHTML = `
<div class="viewer viewer--${xmlType}">
${serialized}
</div>`;
}
}, [serialized])
if (!serialized) {
return <div className={`viewer viewer--${xmlType}`}></div>;
}
return <div ref={shadowHost}></div>;
}
推荐阅读
- android - 将推送通知和来电通知转发到 ble 设备
- r - 叠加直方图和密度估计
- c++ - Libc hypot 函数似乎为 double 类型返回不正确的结果......为什么?
- python - 在 Python 中为机器学习模型总结具有多个值的特征
- c# - 两个不同类的扩展方法
- python - 在从 node/express/tedious 执行 python 脚本之前等待存储过程完全完成
- java - 用于 XML 的带有 CData JDBC 驱动程序的 OAuth - Google Drive 上的文件 - 未使用 CallbackURL
- carousel - 类活动以锚定旋转木马幻灯片
- reactjs - Want to navigate to first page on a button click
- c# - Xamarin ListView 和 ObservableCollection 最多显示 5 个数据