亲子交流使用通行证道具似乎没有问题:
mainpage.ios.js代码:
var OtherPage = require('./otherpage');
<OtherPage value={2}/>
然后在otherpage.ios.js上,我可以使用this.props.value来使用该变量,但是如果我更新otherpage.ios.js上的值,如何将其传达回mainpage.ios.js?
您将传递一个回调,然后通过props传递它,可能会在设置变得更高级时利用componentWillReceiveProps钩子。
如果您大量这样做,则应该使用Flux或Redux或类似工具。
import React, {
Component,
TouchableOpacity,
Text,
} from 'react-native';
class Main extends Component {
constructor() {
super();
this.state = {
data: 'default'
}
}
onChange = (data) => {
console.log(`Data changes to ${data} !`);
this.setState({ data });
}
render() {
const { data } = this.state;
return <Other data={data} onChange={this.onChange}></Other>;
}
}
class Other extends Component {
render() {
const { data } = this.props;
console.log(`Other Component Data is ${data}`);
return (
<TouchableOpacity onPress={() => {this.props.onChange('Success!')} }>
<Text style={{fontSize: 30}}>{data}</Text>
</TouchableOpacity>
);
}
}
此外,如果您在知道辅助组件中不需要状态时使用静态组件,则可以构建更多可重用的功能组件:
class Main extends Component {
constructor() {
super();
this.state = {
data: 'default'
}
}
onChange = (data) => {
console.log(`Data changes to ${data} !`);
this.setState({ data });
}
render() {
const { data } = this.state;
return <Other data={data} onChange={this.onChange}></Other>;
}
}
const Other = ({ data, onChange }) => {
return (
<TouchableOpacity onPress={() => {onChange('Success!')} }>
<Text style={{fontSize: 30}}>{data}</Text>
</TouchableOpacity>
);
}
编辑这些天,您可能应该只使用功能组件和挂钩,在React网站上有很多关于此的文档,但是想法很相似:-)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句