react-native - 在 React Native 中，如何从另一个组件访问一个组件的方法？

Question

我正在尝试从不同的组件访问 React Native 组件的方法。它是通过 props 传递的。不幸的是，这些组件似乎没有公开提供它们的方法。我如何才能访问该方法？

看看下面，你会看到 InsideView 有 this.props.myModal，它是一个 ShowMyModal 组件。但是，它无权访问 .openModal() 方法。

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

Answer 1

这样的事情应该工作:

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