创建动态组件
创建动态组件
提问于 2021-10-22 12:54:41
当我实现如下内容时，我想动态地创建一个组件：
const gen_Comp = (my_spec) => (props) => {
return <h1>{my_spec} {props.txt}</h1>;
}
const App = () => {
const Comp = gen_Comp("Hello");
return (
<Comp txt="World" />
);
}有些地方出了问题(什么地方出了问题很难解释，因为它是我的应用程序特有的，重点是我一定做错了什么，因为当组件被重命名时，我似乎正在失去状态)。我也在React.createElement上尝试过这一点，但问题仍然存在。
那么，在运行时创建组件的正确方法是什么呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-22 13:00:35
反映是否需要挂载/卸载组件的主要方式是通过组件类型(第二种方式是键)。每次应用程序呈现时，都调用gen_Comp并创建一种新类型的组件。它可能具有与前一个相同的功能，但它是一个新组件，因此react被迫卸载旧组件类型的实例并挂载其中一个新类型。
您只需要创建一次组件类型。如果可以的话，我建议您在呈现之外使用工厂，所以当模块加载时它就会运行：
const gen_Comp = (my_spec) => (props) => {
return <h1>{my_spec} {props.txt}</h1>;
}
const Comp = gen_Comp("Hello");
const App = () => {
return (
<Comp txt="World" />
);
}如果它绝对需要在组件的呈现内部完成(例如，它依赖于道具)，那么您需要回溯它：
const gen_Comp = (my_spec) => (props) => {
return <h1>{my_spec} {props.txt}</h1>;
}
const App = ({ spec }) => {
const Comp = useMemo(() => {
return gen_Comp(spec);
}, [spec]);
return (
<Comp txt="World" />
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69677265
复制相关文章
相似问题
腾讯云开发者
