使用 pass 道具,父子沟通似乎没有问题:
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>
);
}
EDIT现在你可能应该只使用功能组件和钩子,React 网站上有很多关于这方面的文档,但想法是相似的:-)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)