javascript - React redux 无法在同一文件中与多个类连接/绑定(bind)操作

Question

我有以下代码:

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

const closeModal = id => ({
    payload: {
        id
    },
    type: 'CLOSE_MODAL'
});

const cfgAction = (a, b, c) => ({
    payload: {
        a,
        b,
        c
    },
    type: 'CFG_ACTION'
});

class classA extends Component {
    constructor(props) {
        super(props);
        this.doAction = this.doAction.bind(this);
    }

    doAction() {
        this.refs['aaa'].doOnRefItem();
    }

    render() {
        const { modals, closeModal } = this.props;
        // ...
        const buttons = <div className="buttons">
            <a onClick={() => closeModal("...")}>THIS WORKS</a>
            <a onClick={this.doAction}>THIS WORKS</a>
        </div>;
        return <div>
            <classB ref={'aaa'} />
            <classB ref={'bbb'} />
            {buttons}
        </div>;
    }
}

class classB extends Component {
    constructor(props) {
        super(props);
    }

    doOnRefItem() {
        const { cfgAction } = this.props;
        cfgAction("xxx", 5, true); //! *ERROR cfgAction is not a function*
    }

    render() {
        // ...
    }
}

const mapStateToProps = ({ modals }, ownProps) => (
    { modals }
);

const mapDispatchToProps = (dispatch, ownProps) =>
    bindActionCreators(
        {
            closeModal,
            cfgAction
        },
        dispatch
    );
connect(mapStateToProps, mapDispatchToProps)(classB);
export default connect(mapStateToProps, mapDispatchToProps)(classA);

注意:所有内容都在同一个文件中(而不是操作)。
我不知道为什么我无法访问该函数的 Prop 。
解决方案可以是使用 classB 执行另一个文件，但在这种情况下不起作用 this.refs['aaa'].doOnRefItem();因为它找不到该函数(但无法访问该元素)。
我希望了解这两种情况为什么不起作用以及如何修复它。
谢谢

更新1
我做了以下更改，出现了引用错误:

class ClassA extends Component {
    constructor(props) {
        super(props);
        this.doAction = this.doAction.bind(this);

        this.r1 = React.createRef();
        this.r2 = React.createRef();
    }

    doAction() {
        // ERROR TypeError: r1.current.doOnRefItem is not a function
        this.r1.current.doOnRefItem();
        this.rr.current.doOnRefItem();
    }

    render() {
        const { modals, closeModal } = this.props;
        // ...
        const buttons = <div className="buttons">
            <a onClick={() => closeModal("...")}>THIS WORKS</a>
            <a onClick={this.doAction}>THIS WORKS</a>
        </div>;
        return <div>
            <ConnectedClassB ref={this.r1} />
            <ConnectedClassB ref={this.r2} />
            {buttons}
        </div>;
    }
}

class ClassB extends Component {
    constructor(props) {
        super(props);
    }

    doOnRefItem() {
        // ...
    }

    render() {
        // ...
    }
}

const mapStateToProps = ({ modals }, ownProps) => (
    { modals }
);

const mapDispatchToProps = (dispatch, ownProps) =>
    bindActionCreators(
        {
            closeModal,
            cfgAction
        },
        dispatch
    );
const ConnectedClassB = connect(mapStateToProps, mapDispatchToProps)(ClassB);
export default connect(mapStateToProps, mapDispatchToProps)(ClassA);

错误类型错误:r1.current.doOnRefItem 不是函数。记录“r1.current”我可以看到类对象...

更新2
修复了以下更改:

const ConnectedClassB = connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(ClassB);

Answer 1

我立即至少发现了几个问题。

首先，请注意您的 React 组件名称以小写字母开头。 React 组件应始终以大写字母开头，以便 JSX 转换正常工作。在您使用的任何地方将 classA 和 classB 更改为 ClassA 和 ClassB。

其次，请记住 connect() 返回一个新的组件类型。您正在调用 connect(mapState, mapDispatch)(ClassB)，但没有在任何地方使用返回的组件类型 - 它被丢弃了。相反，您需要:

const ConnectedClassB = connect(mapState, mapDispatch)(ClassB);

然后您的 ClassA 组件需要实际渲染该连接的组件类型:

<ConnectedClassB />

此外，React string refs 基本上已被弃用。使用object refs via React.createRef() instead .

最后，请注意，您确实应该使用 the "object shorthand" form of mapDispatch而不是函数形式。