可以从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); 

制罐部件通过使用renderScene道具{route.component}在JSX称为？

如果{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'或'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>