如何在反应原生中从它的类中实例化一个组件

时间:2017-10-22 10:21:59

标签: javascript reactjs react-native

我正在尝试在render中实例化一个类:

import myFirstComponentfrom './components/myFirstComponentfrom'
import mySecondComponent'./components/mySecondComponent'

  additionalComponents= [
    {component:myFirstComponent},
    {component:mySecondComponent}
  ]
...

render(){
  return (
    <View>
      {additonalComponents[0].component}
      {additonalComponents[1].component}
    </View>
}

不幸的是,它不起作用......任何想法如何做到这一点?

谢谢,

3 个答案:

答案 0 :(得分:1)

找到答案,使用:

render(){
  return (
    <View>
      {React.createElement(this.additionalComponents[0].component, {})}
      {React.createElement(this.additionalComponents[0].component, {})}
    </View>
}

答案 1 :(得分:0)

React Native不会将任何不以大写字母开头的对象视为类。 myFirstComponent应该是MyFirstComponent。

此外,导入是错误的,但我假设这是类型,否则甚至不会编译。

答案 2 :(得分:0)

import {MyFirstComponent} from './components/myFirstComponentfrom';
import {MySecondComponent} from './components/mySecondComponent';

  const additionalComponents = [
    {component:myFirstComponent},
    {component:mySecondComponent}
  ]
...

render(){
  return (
    <View>
      {additonalComponents[0].component}
      {additonalComponents[1].component}
    </View>
}

您的组件名称应该是First Letter Capital,并且您的导入看起来不正确。 也许这会有所帮助。