7

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

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

3 回答 3

3

答案在文档中直接解释：

约定：将不相关的道具传递给包装的组件 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 时，你应该能够将原始组件所需的 props 直接传递给它，而不是在 HOC 中使用它们，这就是{...this.props}传播语法的用途。您可以阅读此答案以获取有关如何...工作的更多详细信息

考虑一个简单组件的情况，如

<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} />

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

于 2018-01-26T06:26:06.943 回答
1

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

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

const EnhancedMessage = enhance(Message);

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

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

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

于 2018-01-26T06:32:19.193 回答
0

简单的回答：

传播道具不是强制性的

如果您想保留组件的道具，在包装后在那里，然后在包装器组件中传播道具，否则不要传播它。

于 2019-05-20T12:09:47.660 回答