Question

我试图了解React的高阶组件结构，但是所有资源都假设您已经了解了当您编写时，扩展运算符在高阶组件中的用途是什么： BaseComponent {... this.props} {... this.state}。如果组件已经作为道具传递，为什么有必要分散这样的道具？

import React, { Component } from 'react';

const EnhanceComponent = BaseComponent => {
    return class EnhancedComponent extends Component {
        state = {
            name: 'You have been enhanced'
        }
        render() {
           return ( 
           <BaseComponent {...this.props} {...this.state} />   
        )
       }
    }
};

export default EnhanceComponent;

Answer 1

答案直接在docs：

中解释

惯例：将不相关的道具传递给包裹的组件HOC向组件添加功能。它们不应该大幅改变   它的合同。预计从HOC返回的组件具有   与包装组件类似的接口。

HOC应该通过与其特定无关的道具   关心。大多数HOC都包含一个看起来像的渲染方法   这样：

要理解这一点，您应该知道{...this.props}的作用。在你的情况下

const EnhanceComponent = BaseComponent => {
    return class EnhancedComponent extends Component {
        state = {
            name: 'You have been enhanced'
        }
        render() {
           return ( 
           <BaseComponent {...this.props} {...this.state} />   
        )
       }
    }
};

export default EnhanceComponent;

EnhanceComponent HOC执行一个简单的操作，即向当前正在渲染的组件添加状态名称，因此基本上当您使用此HOC时，您应该能够将原始组件所需的道具直接传递给它，而不是在HOC，这是{...this.props}扩展语法的用途。您可以阅读此答案，详细了解... works

的详细信息

考虑使用像

这样的简单组件的情况

<MyComponent className='wrapper-container' onClick={this.handleClick} />

并定义为

class MyComponent extends React.Component {
      render() {
         const { className, onClick} = this.props;

         ...
      }
   }

现在，如果你在这个组件上使用HOC，比如

const EnhancedMyComponent = EnhanceComponent(MyComponent);

您可以将其渲染为

<EnhancedMyComponent className='wrapper-container' onClick={this.handleClick} />

现在如果你没有在你的HOC中写{...this.props}，那么MyComponent将不再有className和onClick作为道具

Answer 2

例如，您有一个组件，并且您想要增强它：

const Message = props => (
  <div className={props.type}>
    <p>{props.message}</p>
  </div>
)

const EnhancedMessage = enhance(Message);

然后，您可以在代码中的某处使用增强组件：

<EnhancedMessage type="alert" message="Something went wrong" />

如果你不传播传递给HOC的道具，Message组件将如何知道传递的道具？

Answer 3

简单答案：

传播道具不是强制性的

如果要保留组件的道具，请在包装后将其保留在那里，然后将道具散布在包装器组件中，否则请勿将其散布。

在React高阶组件中传播道具的目的是什么？

3 个答案: