在React高阶组件中散布道具的目的是什么？

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

答案在文档中直接解释：

\n\n

\n

约定：将不相关的 Prop 传递给包装组件 HOC 向组件添加功能。他们不应该大幅改变其合同。它期望从 HOC 返回的组件具有与包装组件类似的接口。

\n\n

HOC 应该传递与其特定关注点无关的 props。\n 大多数 HOC 都包含一个类似于以下的渲染方法：

\n

\n\n

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

\n\n

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

\n\n

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

\n\n

考虑一个简单组件的情况，其使用方式如下

\n\n

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

\n\n

并定义为

\n\n

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

\n\n

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

\n\n

const EnhancedMyComponent = EnhanceComponent(MyComponent);\n

\n\n

你会把它渲染成这样

\n\n

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

\n\n

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

\n