javascript - React + Redux HOC 加载器

Question

我在尝试使用 HOC 修复重复代码时遇到问题。在我的 React 应用程序中，我有许多页面需要 redux 的 props 才能完全加载。我一直在通过为 this.props.something 放置一个 switch 语句并渲染一个加载器来以简单的方式解决这个问题。我试过创建一个 HOC，但我认为我的逻辑不对。如果你能帮助我，我将不胜感激。

这是一个示例路线

import React, { Component } from 'react';
import { connect } from 'react-redux';
import LoaderHOC from '../../components/hoc/Loader';
import './Show.css';

class Show extends Component {

    render() {
        return (
            <div className="d-block w-100">
                <div className="console-show-header d-flex bg-info justify-content-center">
                    {this.props.company.name}
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return { company: state.setCompany };
}

export default LoaderHOC(this.props.company)(connect(mapStateToProps)(Show));

和我的HOC

import React, {Component } from 'react';
import Spinner from '../UI/Spinner';

const LoaderHOC = (propName) => (WrappedComonent) => {
    return class LoaderHOC extends Component {
        isEmpty(prop) {
            return (
                prop === null ||
                prop === undefined ||
                (prop.hasOwnProperty('length') && prop.length === 0) ||
                (prop.constructor === Object && Object.keys(prop).length === 0)
            );
        }

        render() {
            return this.isEmpty(this.props[propName]) ? <Spinner /> : <WrappedComonent {...this.props} />;
        }   
    }
}

export default LoaderHOC;

Answer 1

试试这个

const LoaderHOC = (propName) => (WrappedComonent) => {
    return class LoaderHOC extends Component {
        const prop = this.props[propName];
        isEmpty(prop) {
            return (
                prop === null ||
                prop === undefined ||
                (prop.hasOwnProperty('length') && prop.length === 0) ||
                (prop.constructor === Object && Object.keys(prop).length === 0)
            );
        }

        render() {
            return this.isEmpty(this.props[propName]) ? <Spinner /> : <WrappedComonent {...this.props} />;
        }   
    }
}

export default connect(mapStateToProps)(LoaderHOC('company')(Show));

解释:

为了让 redux 向您传递更新的 Prop ，您需要连接您的 HOC。由于您需要在运行时访问 prop 的值，因此您需要通过组件内的 this.props[propName] 访问它。