React Component Prop 可以调用 class 对象吗？

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} 可以调用 routes 变量中的组件吗?

如果将 {route.component} 更改为，则可以正确调用

TestClass。

Answer 1

您在询问是否可以使用对象属性 (route.component) 代替 class 名称。绝对地！请记住，这些只是标识符。您使用它的方式与使用 class 名称的方式完全相同。

所以不用

{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，我们的组件标识符名称应以大写字母开头：

User-Defined Components Must Be Capitalized

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

在我们的例子中，它是 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>

React Component Prop 可以调用 class 对象吗？

Can class object be called from React Component Prop?

javascript

jsx

reactjs

react-native