Реагировать на невозможность подключения / связывания в одном файле с несколькими классами.

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

Примечание: все находится в одном файле (не действия).
Я не знаю, почему я не могу получить доступ к реквизиты функции.
Решением может быть создание другого файла с классом B, но в этом случае не работает this.refs ['aaa']. doOnRefItem (); потому что он не может найти функцию (но доступ к элементу).
Я понимаю * в обоих случаях, почему не работает и как это исправить.
Спасибо

ОБНОВЛЕНИЕ 1
Я получил следующее изменение, получив ошибку ref:

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

ОШИБКА TypeError: r1.current.doOnRefItem не является функцией. В журнале 'r1.current' я вижу объект класса ...

ОБНОВЛЕНИЕ 2
Исправлено со следующим изменением:

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

Answer 1

Я сразу вижу по крайней мере пару проблем.

Во-первых, обратите внимание, что имена ваших компонентов React начинаются со строчных букв. Реагирующие компоненты должны всегда начинаться с заглавной буквы, чтобы преобразование JSX работало правильно. Измените classA и classB на ClassA и ClassB везде, где вы их используете.

Во-вторых, помните, что connect() возвращает новый тип компонента. Вы звоните connect(mapState, mapDispatch)(ClassB), но нигде не используете возвращенный тип компонента - он выбрасывается. Вместо этого вам понадобится:

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

, а затем вашему компоненту ClassA нужно будет фактически отобразить этот тип подключенного компонента:

<ConnectedClassB />

Кроме того, ссылки на строки React в основном устарели. , Используйте ссылки на объекты через React.createRef() вместо .

Наконец, обратите внимание, что вы действительно должны использовать форму "сокращенного обозначения объекта" mapDispatch вместо функции сформироваться.