可以从 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 props 中使用 {route.component} 调用 routes 变量中的组件？

如果将 {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>