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

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;

但是我收到了这个错误

未捕获的类型错误：无法读取未定义的属性“联系人” 因为在课堂外无法访问道具。

我尝试了很多解决方案 -

1) one of tried solution

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

Answer 1

我改变了传递和访问数据的方式。我更改的代码如下 -

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('contacts')(ContactList);

加载器代码（高阶组件）-

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(this.props[propName]) ? <div className="loader"></div> : <WrappedComponent {...this.props}/>
        }
    }
}

export default Loader;

Answer 2

问题似乎是您尝试访问道具的方式：

export default Loader(this.props.contacts /* <-- this is incorrect */ )(ContactList);

重新考虑情况 - 您想要实现什么目标？ this 在您的模块上下文中是什么意思？

通常在使用 HOC 的时候，你会发现会出现类似这样的模式：

export default Loader(ContactList);

然后哪个（取决于Loader 的实现）将允许您导入该组件（即LoaderContactList）并将道具“通过”Loader 向下传递到内部ContactList，如下所示：

<LoaderContactList contacts={ [ 'bob', 'joe', 'mary' ] } />

希望这能提供一些澄清。

更新说明 HOF/HOC 概念

为了说明我的回答中描述的 HOC 概念，请参阅以下内容：

export function(InnerComponent) { // This is the higher-order-function to export (ie Loader)

    return class OuterComponent extends Component { // This is the higer-order-component

        render() {
            /* To illustrate the possiblitiy of reusable code via HOC's, 
               this HOC responds to an generic 'isBusy' prop by returning 
               a loading message if truthy */
            if(this.props.isBusy) {
                return <p>Loading</p>
            }

            /*
            Otherwise, the inner component that you pass to the higer- 
            order-function is rendered. The "pass through" concept I 
            discuss is shown here. Notice how all props from the 
            OuterComponent are passed through to the InnerComponent (ie 
            ContactList) 
            */
            return <InnerComponent { ...this.props } />
        }
    }
}

Answer 3

这里：

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

您正试图在课堂外访问道具。从 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 组件将是可重用的，因为您也可以在不同的组件中使用它。希望这会有所帮助

Answer 4

您的代码应如下所示

HOC：

const Loader = (props) => (WrappedComponent) => (moreProps) => {
const ContactList = props.ContactList;
 return (
   <Wrapper>
     <Container>
       <WrappedComponent {...moreProps} />
     </Container>
   </Wrapper>
 )
}

现在可以这样使用了

export default Loader({ [ 'Praveen', 'Hari', 'Swamy' ] })(ContactList)

Answer 5

导出默认加载器(this.props.contacts)(ContactList);

这是错误的，你必须在类外设置一个 let 变量并将其设置在类内，然后在那里调用它