React Component Propからクラスオブジェクトを呼び出せますか？

Question

私は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); 

缶成分はJSXでrenderScene小道具に{route.component}を使用して呼び出すこと？

{route.component}を<テストクラス/ >に変更すると、TestClassが正しく呼び出されます。

---

Answer 1

あなたは、クラス名の代わりに、オブジェクトのプロパティ（route.component）を使用できる場合は、求めています。絶対に！これらは単なる識別子であることを覚えておいてください。クラス名を使用したのとまったく同じ方法で使用します。

ので、代わりの

{route.component} 

あなたは

<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>

上記の作品が、私の知る限りthe React documentationから伝えることができるよう、私たちのコンポーネント識別子名は大文字で始める必要があります。

ユーザー定義のコンポーネントは大文字でなければなりません

要素タイプが小文字で始まる場合、<div>または<span>のようなビルトインコンポーネントを参照し、結果として文字列'div'またはが返されますは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>