可以从React Component Prop中调用类对象吗?
问题描述:
我正在学习ReactNative.Navigator.renderScene道具。在路线可变可以从React Component Prop中调用类对象吗?
'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被正确调用。
答
你在问是否可以使用对象属性(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官方文档,发现{}中包含的JavaScript对象是文本或函数,并未按照我的方式使用。 正如你所说,我将从现在开始使用大写的标识符。 非常感谢! – user2255716
@ user2255716:很高兴帮助。我不确定你的意思是什么*“我发现包含在{}中的javascript对象是文本或函数,而不是用我的方式。”*该表达式可能导致任何结果,并且*被使用... –