React-Native 上另一个组件的访问方法 [英] Accessing method of another component on React-Native

问题描述

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

A 类扩展组件 {测试方法A(){}使成为() {返回 (<View style={[styles.scene, {backgroundColor: 'red'}]}><TouchableHighlight onPress={this.onPress}><正文>欢迎.按这里！</Text></TouchableHighlight></查看>);}}B 类扩展组件 {测试方法B(){}使成为() {返回 (<View style={[styles.scene, {backgroundColor: 'red'}]}><TouchableHighlight onPress={this.onPress}><正文>欢迎.按这里！</Text></TouchableHighlight></查看>);}}

如何从 B 访问 testMethodA 和从 A 访问 testMethodB?

解决方案

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

子访问父方法 - props

class Child extends Component {使成为() {返回(<div>{this.props.formatMessage(10)}</div>)}}类父扩展组件{格式消息(数字){返回 '​​$' + 数字；}使成为() {return (<Child formatMessage={this.formatMessage}/>);}}

父访问子方法 - refs

class Child extends Component {获取内部数据(){返回一些内部数据"；}使成为() {返回(<div>子组件</div>)}}类父扩展组件{componentDidMount() {const childData = this.refs.child.getInnerData();}使成为() {return (<Child ref='child'/>);}}

你应该做的是有一个共同的父级来保存 componentA & 的数据.componentB 并根据需要在它们之间传递它.

class Child1 扩展组件 {componentDidMount() {this.props.onMount('child 1');}使成为() {return (<div>I'm child1.child2 data is: {this.props.data}</div>)}}类 Child2 扩展组件 {componentDidMount() {this.props.onMount('child 2');}使成为() {return (<div>I'm child2.child1 data is: {this.props.data}</div>)}}类父扩展组件{使成为() {返回 (<div><Child1 onMount={(msg => this.setState(child1: msg)} data={this.state.child2}/><Child2 onMount={(msg => this.setState(child2: msg)} data={this.state.child1}/>

);}}

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

I have 2 components A and B as below,

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

How can I access testMethodA from B and testMethodB from A?

解决方案

There are two ways to get access to another component methods:

child accesses a parent method - props

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

parent accesses a child method - refs

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

What you should do is have a common parent that will hold the data of componentA & componentB and pass it between them as needed.

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

You can also combine the first & second methods (props & refs) to get the methods of componentA & componentB and pass them as props to you componentB & componentA respectively, but this is really not recommended

这篇关于React-Native 上另一个组件的访问方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！