Dans Réagissent Natif, comment puis-je accéder à des méthodes d'un composant à partir d'un autre composant?

J'essaye d'accéder à une méthode de Réagir composant Natif à partir d'un autre composant. Il est passé à travers les accessoires. Malheureusement, il semble que les composants ne fournissent pas leurs méthodes publiquement. Comment puis-je obtenir l'accès à cette méthode?

Jetez un oeil à ce qui suit, vous verrez InsideView a cette.accessoires de jeu.myModal, qui est un ShowMyModal composant. Cependant, il n'a pas accès à l' .openModal() la méthode.

Dans Réagissent Natif, comment puis-je accéder à des méthodes d'un composant à partir d'un autre composant?

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  ActionSheetIOS,
  StyleSheet,
  Text,
  View,
} = React;

var InsideView = React.createClass({
  makeItOpen: function() {
    debugger;
    this.props.myModal.openModal();
  },

  render: function() {
    return (
      <View>
        <Text onPress={() => this.makeItOpen()}>Click me!</Text>
      </View>
    );
  }
});

var ShowMyModal = React.createClass({
  getInitialState: function() {
    return {
      isModalOpen: false,
    }
  },

  openModal() {
    this.setState({isModalOpen: true});
  },

  closeModal() {
    this.setState({isModalOpen: false});
  },

  render: function() {
    return (
      <Text>isModalOpen = {String(this.state.isModalOpen)}</Text>
    );
  }
});

var AwesomeProject = React.createClass({
  getInitialState: function() {
    return {
      myModal: <ShowMyModal />,
    }
  },

  render: function() {
    return (
      <View style={{padding: 30}}>
        <InsideView myModal={this.state.myModal}/>
        {this.state.myModal}
      </View>
    );
  },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

OriginalL'auteur Some Guy | 2015-08-13

  1. 4

    Quelque chose comme cela devrait fonctionner:

    'use strict';

var React = require('react-native');
var {
  AppRegistry,
  ActionSheetIOS,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} = React;

var InsideView = React.createClass({
  render: function() {
    return (
      <View>
        <TouchableOpacity onPress={() => this.props.openModal()}><Text>Open modal!</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => this.props.closeModal()}><Text>Close modal!</Text></TouchableOpacity>
      </View>
    );
  }
});

var ShowMyModal = React.createClass({
  render: function() {
    return (
      <Text>isModalOpen = {String(this.props.isVisible)}</Text>
    );
  }
});

var SampleApp = React.createClass({
  getInitialState: function() {
    return {
      isModalOpen: false
    }
  },

  _openModal: function() {
    this.setState({
      isModalOpen: true
    });
  },

  _closeModal() {
    this.setState({
      isModalOpen: false
    });
  },

  render: function() {
    return (
      <View style={{padding: 30}}>
        <InsideView openModal={this._openModal} closeModal={this._closeModal}/>
        <ShowMyModal isVisible={this.state.isModalOpen}/>
      </View>
    );
  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);
    je ne sais pas pourquoi ce gars n'a pas de cocher ce que la bonne réponse mais... merci man! hahaha vous m'avez aidé avec mon modal!

    OriginalL'auteur Dave Sibiski

  2. 4

    Je ne pense pas que c'est une bonne idée de stocker les composants dans l'état. L'état devrait vraiment être utilisé pour le composant de données plutôt que des sous-composants. Dave solution ci-dessus est la bonne approche, mais il pourrait être fait un peu mieux qu'il se déplace à l'état de modal à l'application (ce qui n'est pas très bon de séparer les préoccupations). C'est bon si modal peut garder son propre état et de savoir si elle est visible ou non. Puis openModal() et closeModal() peut faire quelques trucs supplémentaires au besoin (par opposition à une certaine manière de réagir aux changements dans la visibilité de ShowModal). Vous pouvez également éviter les _openModal et _closeModal qui sont passe-partout.

    Je pense qu'il est préférable d'utiliser des refs. Refs est le standard de la manière de se référer à d'autres composants. Voir ici pour plus de détails sur les refs https://facebook.github.io/react/docs/more-about-refs.html Vous pouvez utiliser les références comme des chaînes de caractères et reportez-vous à la composante, que les chaînes de caractères, mais c'est un peu moche comme introduit des noms globaux qui sont en contradiction avec l'approche de réagir. Mais vous pouvez aussi utiliser les rappels comme les références à l'ensemble de vos composants internes comme les champs. Il y a une belle et simple exemple de cela est de réagir de la documentation: http://facebook.github.io/react-native/docs/direct-manipulation.html#forward-setnativeprops-to-a-child. Je copie ici dans le cas où la documentation est mise à jour:

    var MyButton = React.createClass({
  setNativeProps(nativeProps) {
    this._root.setNativeProps(nativeProps);
  },

  render() {
    return (
      <View ref={component => this._root = component} {...this.props}>
        <Text>{this.props.label}</Text>
      </View>
    )
  },
});

    Ce qui se passe ici - la vue en question a rappel ref qui la détermine._root comme le point de vue de la sauvegarde de la composante. Alors dans tout autre endroit dans le composant, vous pouvez utiliser cette._root de s'y référer.

    Donc, dans votre cas, il pourrait ressembler à ci-dessous (notez que vous avez besoin de ces anonymes flèche fonctions plutôt que de passer à la openModal /closeModal méthodes parce qu'à l'époque de rendu _modal n'est pas encore définie, vous ne pouvez la consulter ultérieurement en utilisant les méthodes anonymes).

     //...
 //InsideView render (same as in Dave's solution) 
  <View>
    <TouchableOpacity onPress={() => this.props.openModal()}><Text>Open modal!</Text></TouchableOpacity>
    <TouchableOpacity onPress={() => this.props.closeModal()}><Text>Close modal!</Text></TouchableOpacity>
  </View>
 //...
 //Sample App render ...
  <View style={{padding: 30}}>
    <InsideView openModal={ () => this._modal.openModal() } closeModal={ () => this._modal.closeModal() } />
    <ShowMyModal ref={component => this._modal = component} />
  </View>

    Alors votre initiale ShowModal mise en œuvre peut rester tel qu'il est - avec son propre état et propre openModal et showModal fonctions.

    C'est vraiment cool, j'ai vraiment n'ai pas utilisé refs avec des rappels assez! Je vais upvote ce sur ma réponse. 🙂

    OriginalL'auteur Jarek Potiuk