渲染 React 组件从导入分配到变量..如何? [英] Render React Component assigned from an import to a variable.. how?

问题描述

所以，我需要动态确定要显示的组件......所以，例如.我有:

So, I have a need for dynamic determination of which component to show.. so, for example. I have:

import Component1 from '..somepath/Component1'
import Component1 from '..somepath/Component2'

var P = {
   red: Component1,
   blue: Component2
}

render() {
  var newComponent = P[color];
  return (
     <newComponent /> // not working
     {newComponent} // not working
    newComoponent // not working

  )
}

这个映射可能很大，因此不需要进行 switch 或 if/else.

this mapping could be huge, thus not doing a switch or if/else.

如何让它在另一个组件中返回?

how do I get this to return in another component?

推荐答案

按照约定，组件名称的首字母必须大写:

As per the convention the component name must be with the first letter capitalised:

render() {
  var NewComponent = P[color];
  return (
     <NewComponent />
  );
}

参考文献:

• https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

这篇关于渲染 React 组件从导入分配到变量..如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！