Reaction-native Как вызвать функцию из другого класса, обернутого в connect () в Reaction-redux? - PullRequest
Новая
       14

Reaction-native Как вызвать функцию из другого класса, обернутого в connect () в Reaction-redux?

0 голосов
/ 05 июля 2018

Я видел вопрос , касающийся моего вопроса. Но я использую функцию подключения в реактивном постоянстве.

Мой код

Класс А 

import B from './B.js';

class A extends Component {
    _onItemPressed(item){
        B.abc();
    }

    render() {
      return (
         <TouchableHighlight
            underlayColor={Colors.colors.lightgrey}
            style={{padding: 15}}
            onPress={this._onItemPressed.bind(this)}>
         <Text>Click Me !</Text>
         </TouchableHighlight>
      );
    }
}

Класс B с использованием функции подключения в реаги-редуксе 

class B extends Component {

    abc(){
      alert('Hello World');
    }

    render() {
      return (
         <View>
            <Text>Welcome to React Native</Text>
         </View>
      );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(B);

В моем случае, как я могу вызвать функцию?

Ответы [ 2 ]

0 голосов
/ 18 марта 2019

Этот подход работал для меня. 

/* Child.js */
import React from 'react'
import withStyles from 'isomorphic-style-loader/lib/withStyles'
import s from './Child.css'

class Child extends React.Component {
  componentDidMount() {
    this.props.onRef(this)
  }
  componentWillUnmount() {
    this.props.onRef(undefined)
  }
  method() {
    alert('do stuff')
  }
  render() {
    return <h1 className={s.root}>Hello World!</h1>
  }
}

export default withStyles(s)(Child);
/* Parent.js */
import React from 'react'
import Child from './Child'

class Parent extends React.Component {
  onClick = () => {
    this.child.method() // do stuff
  }
  render() {
    return (
      <div>
        <Child onRef={ref => (this.child = ref)} />
        <button onClick={this.onClick}>Child.method()</button>
      </div>
    );
  }
}
0 голосов
/ 05 июля 2018

Если A и B не связаны каким-либо образом (т.е. не имеют родительских и дочерних отношений), способ получить доступ к методу компонента в другом компоненте - это объявить метод как статический, однако в этом случае вы не сможет получить доступ к ключевому слову this внутри него

A 

import B from './B.js';

class A extends Component {
    _onItemPressed(item){
        B.abc();
    }

    render() {
      return (
         <TouchableHighlight
            underlayColor={Colors.colors.lightgrey}
            style={{padding: 15}}
            onPress={this._onItemPressed.bind(this)}>
         <Text>Click Me !</Text>
         </TouchableHighlight>
      );
    }
}

B 

class B extends Component {

    static abc(){
      alert('Hello World');
    }

    render() {
      return (
         <View>
            <Text>Welcome to React Native</Text>
         </View>
      );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(B);
...