Is it possible to call a class object from React Component Prop?

Question

I am studying the details of ReactNative.Navigator.renderScene.

'use strict';
import React,{Component} from 'react';
import ReactNative from 'react-native';
const {
  TouchableHighlight,
  Navigator,
  AppRegistry,
  Text,
  View,

} = ReactNative;

class TestClass extends Component{
  render(){
    return <Text>test</Text>
  }
}
class MyTag extends Component{
  render(){
    return <Text>test</Text>
  }
}
class Main extends Component{
  render(){
    const routes =[{component:TestClass,index:0},{component:MyTag,index:1}]
    return(
      <Navigator
        initialRoute={routes[0]}
        initialRouteStack={routes}
        renderScene={(route, navigator) =>
          <View><TouchableHighlight onPress={() => {
            if (route.index === 0) {
            navigator.push(routes[1]);
          } else {
            navigator.pop();
          }
          }}><View>{route.component}</View>
      </TouchableHighlight></View>
        }
      />

    )
 }

}



AppRegistry.registerComponent('ChoiceComponent', () => Main);

Is it possible to call a component in a routes variable using {route.component} in the renderScene details in JSX ?

TestClass is called correctly if {route.component} is changed to <Test Class />.

---

Answer 1

You ask if you can use the object property ( route.component) instead of the class name. Absolutely! Remember that these are only identifiers. You use it just like you used the class name.

So instead

{route.component}

Do you want to

<route.component />

( , , , .)

:

class Example1 extends React.Component {
  render() {
    return <div style={{color: "blue"}}>{this.props.text}</div>;
  }
}
class Example2 extends React.Component {
  render() {
    return <div style={{color: "green"}}>{this.props.text}</div>;
  }
}
const routes = [
  {component: Example1},
  {component: Example2}
];

ReactDOM.render(
  <div>{routes.map(route => <route.component text="Hi there" />)}</div>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Hide result

, , React, :

, , <div> <span>, 'div' 'span', React.createElement. , , <Foo />, React.createElement(Foo) , JavaScript.

route.component, (- ., , route_component, ), . ( . , , , , .)

, , , :

const RouteComponent = route.component;
return <RouteComponent text="Hi there" />;

:

class Example1 extends React.Component {
  render() {
    return <div style={{color: "blue"}}>{this.props.text}</div>;
  }
}
class Example2 extends React.Component {
  render() {
    return <div style={{color: "green"}}>{this.props.text}</div>;
  }
}
const routes = [
  {component: Example1},
  {component: Example2}
];

ReactDOM.render(
  <div>{routes.map(route => {
    const RouteComponent = route.component;
    return <RouteComponent text="Hi there" />;
  })}</div>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Hide result