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

Question

我试图理解React的高阶组件结构，但是所有的参考资料都假设您已经理解了在编写：BaseComponent{…this.props}{…this.state}时，spread操作符在高阶组件中的作用。如果组件已经作为道具传入，为什么有必要像这样展开道具？

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

简单回答：

传播道具不是强制性的

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

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

答案在文件中直接解释：

约定：将不相关的道具传递到包装组件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}扩展语法的目的。您可以阅读此答案以了解有关…工作原理的更多详细信息

考虑使用简单组件的情况

<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将不再有class Name和onClark作为道具