Question

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

import Template1 from './Template1.jsx';
import Template2 from './Template2.jsx';

var ComponentTemplate = (some_condition === true) ? "Template1" : "Template2"

render() {
    <ComponentTemplate prop1="prop1 val" />
}

这甚至可能吗？如果是这样，怎么样？

Answer 1

我不清楚为什么你需要使用类的字符串表示而不是只是切换组件或使用条件渲染：

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

但是假设这是过于简单化，最简单的方法是使用将字符串转换为组件的映射对象。使用ES2015 enhanced object literals，它变得相当简单：

var Components = {
  Template1,
  Template2,
};

var Component = condition ? Components['Template1'] : Components['Template2'];

// ...

return ( <Component /> );

Answer 2

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

render () {
  !this.state.isAuthorized? renderLogin(): renderTweets();
}

renderLogin () {
   <LoginView/>
}

renderTweet () {
   <ListTweets/>
}

希望这就是你要找的东西！

Answer 3

所有动态渲染都应该在Render函数中。因为JSX编译将取决于变量名称而不是Object引用。

如果你写<Component />，它会转移到React.createElement('Component')。

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

取决于Render运行时的条件。使用您想要的不同React标记。

render() {
    condition ? <Template1 /> : <Template2 />
}

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

3 个答案: