渲染从导入分配给变量的 React 组件……如何？

Question

因此，我需要动态确定要显示的组件.. 所以，例如。我有：

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

  )
}

此映射可能很大，因此不进行切换或 if/else。

如何在另一个组件中将此 return 获取？

Answer 1

按照惯例，组件名称必须首字母大写：

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

参考文献：

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

渲染从导入分配给变量的 React 组件……如何？

Render React Component assigned from an import to a variable.. how?

reactjs

react-jsx