Реагировать на родительского ребенка

Передача родительского ребенка не представляет проблемы при использовании реквизита прохода:

mainpage.ios.js код:

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

Затем на otherpage.ios.js я могу использовать переменную, используя this.props.value, но если я обновляю значение на otherpage.ios.js, как он будет передан обратно на mainpage.ios.js?

Ответ 1

Вы передали бы обратный вызов, а затем передавали его через реквизиты, вероятно, используя крюк 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>
    );
  }
}

Кроме того, если вы используете Static Components, когда знаете, что во вторичном компоненте не требуется состояние, вы можете создать гораздо больше повторно используемых функциональных компонентов:

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

Ответ 2

Я очень рекомендую использовать 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>
}