reactjs - 如何在调用高阶组件时访问类外的 prop，以便高阶组件可重用

Question

如果数据不可用，我已经创建了更高阶的组件来渲染加载程序。名为Loader的组件是高阶组件。名为 ContactList 的组件调用高阶组件。 我的 ContactList 组件代码:

import React, { Component } from 'react';
import '../App.css';
import Loader from './hoc/Loader.js';

class ContactList extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

 render() {
   return (
     <div className="App">
       {
        this.props.contacts.map((contact, index) => (
          <div key={index}>
            <p>{contact.name}</p>
          </div>
        ))
      }
    </div>
   );
  }
}

export default Loader(this.props.contacts)(ContactList);

Loader(HOC) 组件的代码 -

import React, { Component } from 'react';
import './Loader.css';

const Loader = (propName) => (WrappedComponent) => {
    return class Loader extends Component {
        isEmpty(prop) {
            return (
                prop === null ||
                prop === undefined ||
                (prop.hasOwnProperty('length') && prop.length === 0) ||
                (prop.constructor === Object.keys(prop).length === 0)
            );
        }
        render() {
            return this.isEmpty(propName) ? <div className="loader"></div> : <WrappedComponent {...this.props}/>
        }
    }
}

export default Loader;

但我收到此错误

Uncaught TypeError: Cannot read property 'contacts' of undefined as props are not accessible outside of class.

我尝试了很多解决方案 -

1) one of tried solution

2) 如果我将导出语句更改为导出默认 Loader(ContactList)，那么这可以正常工作，但加载器组件不再可重用

Answer 1

这里:

export default Loader(this.props.contacts)(ContactList);

您正在尝试在类外访问 Prop 。不可能从 ContactList 类中访问它们。

编辑

如果您需要根据 contacts 数组显示加载程序，则无需使用 HOC。只需在模板中使用 Loader 即可:

<Loader contacts={this.props.contacts}>
      {
        this.props.contacts.map((contact, index) => (
          <div key={index}>
            <p>{contact.name}</p>
          </div>
        ))
      }
</Loader>

请注意，在这种情况下，您必须使您的 Loader 只是一个组件，而不是 HOC。

这里是这种情况的例子:

class Loader extends React.Component {
  render(){
    const {values} = this.props;
    if (values.length) {
       return this.props.children;
    }
    return <div>Loading...</div>
  }
 }

并在 ContactListComponent 中使用它:

import React, { Component } from 'react';
import '../App.css';
import Loader from './hoc/Loader.js';

class ContactList extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

 render() {
   return (
     <div className="App">
       <Loader values={this.props.contacts}>
       {
        this.props.contacts.map((contact, index) => (
          <div key={index}>
            <p>{contact.name}</p>
          </div>
        ))
      }
      </Loader>
    </div>
   );
  }
}

export default ContactList;

Loader组件只是示例，使用您自己的Loader。 正如我所说，没有必要使用 HOC。无论如何，您的 Loader 组件将是可重用的，因为您也可以在不同的组件中使用它。希望这有帮助