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访问padding-top？

Answer 1

有两种方法可以访问其他组件方法：

子访问父方法 - 道具

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＆amp;的数据。 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>
         );
     }
}

你也可以结合第一个＆amp;第二种方法（道具和参考）来获得组件A＆amp;的方法。 componentB并将它们作为道具传递给componentB＆amp; componentA分别为，但实际上不推荐

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

1 个答案: