Question

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

这是路线示例

> outputs
# A tibble: 2 x 2
  SampID pvals
  <fct>  <dbl>
1 AA     0.253
2 AB     0.862

我的特殊要求

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

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通过更新的道具，您需要连接HOC。并且由于您需要在运行时访问prop的值，因此需要通过组件内部的this.props[propName]来访问它。

React + Redux HOC加载程序

1 个答案: