将 react.js 中已经渲染的 elment 的内部 HTML 设置为一个组件

Question

我在 react 中使用离子 ui 库.js这是我的代码

<IonTabBar slot="bottom">
{page.tabs.map(tab => {
const Icon = Icons[`${tab.icon}`];
return (
<IonTabButton>
<Icon
style={{
fontSize: "20px"
}}
/>
<IonLabel
style={{
fontSize: "14px"
}}
>
{" "}
{tab.text}{" "}
</IonLabel>
</IonTabButton>
);
})}
</IonTabBar>
</IonTabs>

当在浏览器上渲染时，它具有这个

<div>
<div class="tabs-inner"> </div>
<ion-tab-bar>
<ion-tab-button>
<svg>
.....
</svg>
<ion-label>
user
</ion-label>
</ion-tab-button>
</ion-tab-bar>
</div>

现在我想在"tabs-inner"类中注入一个组件，所以我的灵魂是给div 一个引用并使用

const tab = tabsRef.current.getElementsByClassName('tabs-inner')[0]

现在我想用tabs-inner类将一个组件注入到div 中，比如

tab.innerHTML = 'am here'

这有效，但如果我尝试

tab.innerHTML = <Mycomponent/>

它没有，我试图将 innerHTML 设置为一个标签，以便我可以将组件注入其中。

有什么想法吗？

Answer 1

您可以尝试将要渲染的组件置于组件的状态并相应地渲染它。如果您不想在特定时间渲染任何内容，则可以将该状态键设置为 null。

constrcutor(props) {
super(props);
this.state = {
componentToRender: null
};
}
componentDidMount() {
setTimeout(() => {
this.setState({
componentToRender: <b>Hello World</b>
});
}, 1000);
}
render() {
return (
<div className="">
{ this.state.componentToRender }
</div>
);
}

在上面的示例中，我只是在 1 秒后设置 HTML，但您可以随时设置数据。

Answer 2

因此，在进行了一些挖掘之后，我发现了一种不太明智的方法来使用react-dom导入hydrate

import { hydrate } from "react-dom";
.........
const tab = tabsRef.current.getElementsByClassName("tabs-inner")[0];
hydrate(
<Canvas/>,
tab
);

这适用于大多数情况，对我来说很酷，但我在我的画布容器中使用 redux，它正在生成其他错误。