Javascript &引用；对象作为React子对象无效；尝试返回render（）内的节点时

我的页面上显示了以下内容：

export class OverworldComponent extends React.Component<OverworldComponentProps, {}> {
    render() {
        return <b>Hello, world!</b>
    }
}

导出类OverworldComponent扩展React.Component{
render（）{
回报你好，世界！
}
}

而不是你好，世界不过，我想输出页面上已经存在的HTMLElement的克隆。（具体来说，是一张表格。）

导出类OverworldComponent扩展React.Component{
render（）{
return document.querySelector（'div.file div.data table'）.cloneNode（false）；
}
}

这会编译，但会导致以下错误（Chrome Inspector）：

而且，仅仅寻找将我的HTMLTableElement“转换”为与React兼容的元素的方法是不对的。当我尝试使用

强制转换时，它将其解释为标记（缺少结束标记），而不是强制转换。所以我一定不明白

render（）

中的机制是什么。我认为框架中有些东西我应该做得不同，但我不知道是什么

---

<上下文>，我正处于一个明天结束的杂乱无章的中间，我今天开始学习反应和Typescript，所以我丢失了很多知识（并且根本没有任何经验）。< > >代码>文档。QuestS选择器（“DIV.FILE文件数据表”）。code>是纯Web API。这意味着它返回的是DOM节点，而不是React组件

React组件的子级也必须是React组件

如果要将DOM节点注入到一个反作用组件中，请考虑使用<代码> 详情如下：

DangerouslySetinerHTML

是一个道具，其值是一个对象：

{uuuuhtml:'一段html源代码
'}

在您的情况下，可能是：

{html:document.querySelector（'div.file div.data table'）.innerHtml}

或

{document.querySelector（'div.file div.data table'）.textContent}

您还可以使用

nodeValue

，

innerText

请阅读此处以查看差异并选择最佳差异：

---

为什么要克隆？react无法以这种方式呈现虚拟dom…因此它不呈现的原因很有道理，也许您可以使用react的“cloneElement”功能克隆它<代码>返回React.cloneElement（查询选择器（'div.file div.data table'））或者createElement在这里更有效..谢谢，这很有效！我通过

危险的LysetinerHTML

对XSS攻击进行了一些研究，发现了一个简单的漏洞。事实上，我认为我需要找到一个更安全的解决方案公开发布。但现在还可以，因为它是用于内部站点（公司的GitHub Enterprise）我知道，像前面链接的示例那样进行注入可能是不可能的，因为我正在克隆一个HTML表，它已经为

视图转义了所有内容。

export class OverworldComponent extends React.Component<OverworldComponentProps, {}> {
    render() {
        return document.querySelector('div.file div.data table').cloneNode(false);
    }
}