react-native 如何从另一个包装在 react-redux 中的 connect() 类调用函数? [英] react-native How to call a function from another class wrapped connect() in react-redux?

问题描述

我看到了这个问题 关于我的问题.但是我在 react-persist 中使用了 connect 函数.

我的代码

A级

从'./B.js'导入B；A类扩展组件{_onItemPressed(item){B.abc();}使成为() {返回 (<TouchableHighlightunderlayColor={Colors.colors.lightgrey}样式={{填充:15}}onPress={this._onItemPressed.bind(this)}><文本>点击我！</文本></TouchableHighlight>);}}

B 类在 react-redux 中使用 connect 函数

B 类扩展组件 {abc(){alert('你好世界');}使成为() {返回 (<查看><Text>欢迎使用 React Native</Text></查看>);}}导出默认连接(mapStateToProps，mapDispatchToProps)(B)；

就我而言，如何调用函数?

解决方案

这种方法对我有用.

/* Child.js */从反应"导入反应从 'isomorphic-style-loader/lib/withStyles' 导入 withStyles从'./Child.css'导入class Child 扩展 React.Component {componentDidMount() {this.props.onRef(this)}componentWillUnmount() {this.props.onRef(未定义)}方法() {alert('做事')}使成为() {return <h1 className={s.root}>Hello World!</h1>}}导出默认 withStyles(s)(Child);/* 父.js */从反应"导入反应从'./Child'导入子项class Parent 扩展 React.Component {onClick = () =>{this.child.method()//做事}使成为() {返回 (<div><Child onRef={ref =>(this.child = ref)}/><button onClick={this.onClick}>Child.method()</button>

);}}

I saw the question relating my question. But I am using connect function in react-persist.

My code

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

Class B using connect function in react-redux

class B extends Component {

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

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

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

In my case, How can I call a function?

解决方案

This approach worked for me.

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

这篇关于react-native 如何从另一个包装在 react-redux 中的 connect() 类调用函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！