react-native - React-Native 上另一个组件的访问方法

Question

我有 2 个组件 A和 B如下，

class A extends Component {

  testMethodA() {

  }

  render() {
      return (
          <View style={[styles.scene, {backgroundColor: 'red'}]}>
              <TouchableHighlight onPress={this.onPress}>
                  <Text>Welcome. Press here!</Text>
              </TouchableHighlight>
          </View>
      );
  }
}


class B extends Component {

  testMethodB() {

  }

  render() {
      return (
          <View style={[styles.scene, {backgroundColor: 'red'}]}>
              <TouchableHighlight onPress={this.onPress}>
                  <Text>Welcome. Press here!</Text>
              </TouchableHighlight>
          </View>
      );
  }
}

如何访问 testMethodA来自 B和 testMethodB来自 A ?

Answer 1

有两种方法可以访问另一个组件方法:

子访问父方法 - Prop

class Child extends Component {
     render() {
         return (<div>{this.props.formatMessage(10)}</div>)
     }
}

class Parent extends Component {
     formatMessage(number) {
         return '$' + number;
     }
     render() {
         return (<Child formatMessage={this.formatMessage} />);
     }
}

父访问子方法 - 引用

class Child extends Component {
     getInnerData() {
          return 'some inner data'; 
     }
     render() {
         return (<div>child component</div>)
     }
}

class Parent extends Component {
     componentDidMount() {
         const childData = this.refs.child.getInnerData();
     }
     render() {
         return (<Child ref='child' />);
     }
}

您应该做的是有一个共同的父级，它将保存 componentA 和 componentB 的数据并根据需要在它们之间传递。

class Child1 extends Component {
     componentDidMount() {
         this.props.onMount('child 1');
     }
     render() {
         return (<div>I'm child1. child2 data is: {this.props.data}</div>)
     }
}

class Child2 extends Component {
     componentDidMount() {
         this.props.onMount('child 2');
     }
     render() {
         return (<div>I'm child2. child1 data is: {this.props.data}</div>)
     }
}

class Parent extends Component {

     render() {
         return (
             <div>
                  <Child1 onMount={(msg => this.setState(child1: msg)} data={this.state.child2} />
                  <Child2 onMount={(msg => this.setState(child2: msg)} data={this.state.child1} />
             </div>
         );
     }
}  

您还可以结合第一种和第二种方法(props 和 refs)来获取 componentA 和 componentB 的方法，并将它们作为 props 分别传递给您 componentB 和 componentA， 但是这个真的不推荐