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}更改为＆lt; Test Class /＆gt;，则会正确调用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>

可以从React Component Prop调用类对象吗？

1 个答案: