所以我将一些数据传递到我在点击事件上导航的页面
render(){
const goToPageTwo = () => Actions.gray({text:"hello"});
return(
</View>
<Button onPress={goToPageTwo} title="Checkout" color="#841584"/>
</View>
);
}
现在在我的其他组件中,如果我将其作为道具
访问this.props.text
它表示道具未定义
请指导如何解决 谢谢!
更新
访问this.props的代码
import React, { Component } from 'react';
import { Actions } from 'react-native-router-flux'; // New code
import {
StyleSheet,
Text,
Alert,
View
} from 'react-native';
const GrayScreen = () => {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={() => Actions.black()}>{this.props.text}</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'gray',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'blue',
},
});
export default GrayScreen;
路由组件的代码
import React, { Component } from 'react';
import { Button } from 'react-native';
import Archives from './components/Archives.js';
import ScarletScreen from './components/ScarletScreen.js';
import GrayScreen from './components/GrayScreen.js';
import Zaika from './components/Zaika.js';
import {Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
import {
Alert,Platform,
StyleSheet,
Text,
View,TextInput,Keyboard
} from 'react-native';
import NavBar, { NavGroup, NavButton, NavButtonText, NavTitle } from 'react-native-nav';
import { Router, Scene } from 'react-native-router-flux';
import App1 from './App1.js';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<{}> {
render() {
return (
<Router>
<Scene key="root">
<Scene
key="zaika"
component={Zaika}
title="Delhi zaika"
initial
/>
<Scene key="app1"
component={App1}
title="app1"
/>
<Scene key="scarlet"
component={ScarletScreen}
title="Scarlet"
/>
<Scene {...this.props}
key="gray"
component={GrayScreen}
title="Gray"
/>
</Scene>
</Router>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
head: { height: 40, backgroundColor: '#f1f8ff' },
text: { marginLeft: 5 },
row: { height: 30 }
});
答案 0 :(得分:2)
您不会将实例属性render() {
return ReactDOM.createPortal(
this.props.children,
document.getElementById("modal-root"),
);
}
与React Stateless Functional Component。
props
将作为第一个参数传入:
props