Ios 反应本族语儿童-父母沟通

使用通行道具进行亲子沟通似乎没有问题：

mainpage.ios.js代码：

var OtherPage = require('./otherpage');
<OtherPage value={2}/>

var OtherPage=require（'./OtherPage'）；

---

然后在otherpage.ios.js上，我可以使用this.props.value来使用变量，但是如果我更新otherpage.ios.js上的值，它将如何传递回mainpage.ios.js？

我强烈建议您在这里使用Flux。当你发现自己需要不同的组件需要相同的信息时，那就意味着你需要通量。当然，你可以使用大量的回调等等，但是随着你的应用程序的增长和变得更加复杂，如果没有像flux这样的东西，管理它会变得更加困难

使用flux，您将让您的主页组件监听更改，并在更改发生后做一些事情。例如：

mainpage:

componentDidMount() {
  SomeStore.addChangeListener(this.updateComponent)
}

componentWillUnmount() {
  SomeStore.removeChangeListener(this.updateComponent)
}

updateComponent() {
  this.setState value: SomeStore.getValue()
}



otherpage:

toggle() {
  SomeActions.change(this.props.value + 1)
}

render() {
  <TouchableOpacity onPress={this.toggle}>
    <View>Some View</View>
  </ToucableOpacity>
}

主页：
componentDidMount（）{
SomeStore.addChangeListener（this.updateComponent）
}
组件将卸载（）{
SomeStore.removeChangeListener（this.updateComponent）
}
updateComponent（）{
this.setState值：SomeStore.getValue（）
}
其他页面：
切换（）{
SomeActions.change（this.props.value+1）
}
render（）{
一些看法
}

您将传递一个回调，然后通过道具传递回调，随着设置的深入，可能会利用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>
    );
  }
}

import-React{
组成部分，
可触摸不透明度，
文本，
}从“反应本机”；
类主扩展组件{
构造函数（）{
超级（）；
此.state={
数据：“默认值”
}
}
onChange=（数据）=>{
log（`Data changes to${Data}！`）；
this.setState（{data}）；
}
render（）{
const{data}=this.state；
返回；
}
}
类其他扩展组件{
render（）{
const{data}=this.props；
log（`其他组件数据是${Data}`）；
返回(
{this.props.onChange（'Success！'）}>
{data}
);
}
}

此外，如果在知道辅助组件中不需要状态时使用静态组件，则可以构建更多可重用的功能组件：

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>
  );
}

类主扩展组件{
构造函数（）{
超级（）；
此.state={
数据：“默认值”
}
}
onChange=（数据）=>{
log（`Data changes to${Data}！`）；
this.setState（{data}）；
}
render（）{
const{data}=this.state；
返回；
}
}
const Other=（{data，onChange}）=>{
返回(
{onChange（'Success！'）}>
{data}
);
}

---

编辑现在你可能应该只使用功能组件和挂钩，React网站上有很多关于这方面的文档，但想法很相似：-）

是的，我看到了那篇文章，但从那看不太清楚。第二个是关于反应和非反应，我不同意。像flux/redux/reflux/which这样的状态存储并不否定子级->父级通信的需要。如果你有智能和非智能组件，就像现在一般建议的那样，你的智能组件知道状态存储，而非智能子组件只显示内容并调用父组件。非常有用。非常感谢你。