javascript - 创建一个封装耦合 React 组件的类，然后将该类设置为 React 状态？

Question

我有一个 React 组件，它呈现一个 FullDayRouteMap 组件，该组件接受状态累加器以及几个 SingleRouteMap 组件，每个组件都会执行更新状态累加器的回调。

然后，FullDayRouteMap 组件将这些更新的累加器作为 props 并重新渲染。

我想将两个组件(即累加器和回调)的耦合功能封装在一个类中，以便我可以在应用程序的多个部分中重用此功能，因此我创建了一个设置为状态的 Manager 类其构造函数中的父 React 组件。

一切正常，但我想知道这是否是一个好的做法。我有点不确定的是，我必须将父组件传递给这个管理器类，以便强制它在累加器更新时重新渲染

这是该管理器类的代码(为了简洁而缩短):

import React from 'react';
import SingleRouteMap from './SingleRouteMap';
import FullDayRouteMap from './FullDayRouteMap';

class Manager {

    constructor(component) {
        this.distanceMetresAcc = 0;
        this.travelTimeSecondsAcc = 0;
    }


    initSingleRouteMap(bookingNodes) {
        bookingNodes.push(
            <SingleRouteMap
                onDirectionsDataLoaded={this.onSingleRouteLoaded} />);
    }

    getFullDayRouteMap() {
        return <FullDayRouteMap
            totalDistanceTravelledMetres={this.distanceMetresAcc}
            totalSecondsTravelled={this.travelTimeSecondsAcc}
        />
    }

    onSingleRouteLoaded = (durationSeconds, distanceMetres) => {
        this.travelTimeSecondsAcc += durationSeconds;
        this.distanceMetresAcc += distanceMetres;
        this.component.forceUpdate();
    };
}

在我的父组件中，这就是我所做的:

Parent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            manager: new Manager(this)
        }
    }
}

然后，渲染函数只需调用 this.state.manager.initSingleRouteMap 和 this.state.manager.getFullDayRouteMap 即可将这些组件动态放置在 UI 中。

Answer 1

使用 HOC 解决问题

function withRouteAcc(WrappedComponent) {
    return class extends Component {
        constructor(props) {
            super(props);
            this.state = {
                distanceMetresAcc: 0,
                travelTimeSecondsAcc: 0,
                bookingNodeCount: 0
            };
        }

        initSingleRouteMap() {
            this.setState(
                (state) => (
                    { bookingNodeCount: state.bookingNodeCount + 1 }
                )
            );
        }

        onSingleRouteLoaded(durationSeconds, distanceMetres) {
            this.setState((state) => (
                    {
                        distanceMetresAcc: state.distanceMetresAcc + distanceMetres,
                        travelTimeSecondsAcc: state.travelTimeSecondsAcc +
                                              durationSeconds
                    }
                )
            );
        }

        getBookingNodes() {
            return this.state.bookingNodeCount.map(() => {
                return <SingleRouteMap onDirectionsDataLoaded={this.onSingleRouteLoaded}/>;
            });
        }

        getFullDayRouteMap() {
            return <FullDayRouteMap totalDistanceTravelledMetres={this.distanceMetresAcc}
                                    totalSecondsTravelled={this.travelTimeSecondsAcc}/>;
        }

        render() {
            <WrappedComponent {...this.props} 
                              bookingNodes={this.getBookingNodes()}
                              fullDayRouteMap={this.getFullDayRouteMap()}
                              initSingleRouteMap={this.initSingleRouteMap}/>;
        }
    };
}

//Usage: withRouteAcc(ParentComponent);
// Now `ParentComponent` can access `bookingNodes` and `fullDayRouteMap` from props, as well as a callback for `initSingleRouteMap`