英文:
am5charts Cannot find HTMLElement with id 'x' React iframe chrome extension
问题
我尝试在Chrome扩展程序的内容脚本中使用am5charts，而且它位于一个iframe内，使用React。
我尝试使用useRef()将htmlElement传递给am5charts。
const chartRef = useRef<HTMLDivElement>();
useEffect(() => {
am5.ready(function () {
const chartDoc = chartRef.current;
const root = am5.Root.new(chartDoc);
});
}, []);
chartRef附加到返回的div元素上。
还尝试了const chartDoc = chartRef.current as HTMLDivElement;
在am5charts内部，检查我传递给am5.Root.new(chartDoc)的内容是否是HtmlElement，但它是React FiberNode对象...
从控制台调试的截图
英文:
I try use am5charts inside a chrome extension, content script and is inside a iframe, React.
I try to use useRef() to pass to am5charts the htmlElement.
const chartRef = useRef<HTMLDivElement>();
useEffect(() => {
am5.ready(function () {
const chartDoc = chartRef.current;
const root = am5.Root.new(chartDoc);
chartRef is atached to a div in the return.
tried too const chartDoc = chartRef.current as HTMLDivElement;
inside of am5charts is checking if what i pass on am5.Root.new(chartDoc) is instanceof HtmlElement but is React FiberNode object...
screenshot from console debugging
答案1
得分: 0
这部分内容的中文翻译如下：
这个起作用了，可能有点巧妙。
const chartRef = useRef<HTMLDivElement>();
useEffect(() => {
const chartDoc = chartRef.current;
if (chartDoc.childNodes.length > 0) {
return;
}
const chartDiv = document.createElement('div');
chartDiv.style.height = '275px';
chartDoc.appendChild(chartDiv);
const root = am5.Root.new(chartDiv);
});
英文:
This worked, maybe little bit hacky.
const chartRef = useRef<HTMLDivElement>();
useEffect(() => {
const chartDoc = chartRef.current;
if (chartDoc.childNodes.length > 0) {
return;
}
const chartDiv = document.createElement('div');
chartDiv.style.height = '275px';
chartDoc.appendChild(chartDiv);
const root = am5.Root.new(chartDiv);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论