如何根据变量值动态请求React组件

How to dynamically request a React Component based on a variable value?

本文关键字：请求 React 组件 动态 变量值 何根      更新时间：2023-09-26

我想知道如何根据变量值动态请求组件。我想在这里完成的是：

import Template1 from './Template1.jsx';
import Template2 from './Template2.jsx';
var ComponentTemplate = (some_condition === true) ? "Template1" : "Template2"
render() {
    <ComponentTemplate prop1="prop1 val" />
}

这可能吗？如果是，如何？

我不清楚为什么需要使用类的字符串表示，而不仅仅是切换组件或使用条件呈现：

var Component = some_condition === true ? Template1 : Template2;
// ...
return ( <Component /> );

但假设这过于简单化，最简单的方法是使用一个映射对象将字符串转换为组件。随着ES2015增强的对象文字，它变得相当简单：

var Components = {
  Template1,
  Template2,
};
var Component = condition ? Components['Template1'] : Components['Template2'];
// ...
return ( <Component /> );

如果你只是想根据条件渲染不同的组件，你实际上可以有两个其他的渲染函数和内部render（），你可以检查条件并调用相应的渲染

render () {
  !this.state.isAuthorized? renderLogin(): renderTweets();
}
renderLogin () {
   <LoginView/>
}
renderTweet () {
   <ListTweets/>
}

希望这就是你想要的！

所有的动态渲染都应该在Render函数内部。因为JSX编译将取决于Variable名称，而不是Object引用。

如果你写CCD_ 1，它将转移到CCD_ 2。

无法引用要选择的动态组件。

取决于"渲染"运行时的条件。使用不同的React标签。

render() {
    condition ? <Template1 /> : <Template2 />
}
相关文章：