React + Redux HOC 加载器答案

【问题标题】：React + Redux HOC LoaderReact + Redux HOC 加载器
【发布时间】：2019-04-06 06:02:03
【问题描述】：

我在尝试使用 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;

【问题讨论】：

标签： javascript html css reactjs redux

【解决方案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 将更新后的 props 传递给您，您需要连接您的 HOC。而且由于你需要在运行时访问 prop 的值，所以你需要通过组件内部的this.props[propName] 来访问它。

【讨论】：