在React高阶组件中传播道具的目的是什么？ [英] What is the purpose of spreading props in React Higher Order Components?

问题描述

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

I'm trying to understand React's Higher Order Component structure, but all the resources just assume you already understand what the purpose of the spread operator is doing in the higher order component when you write: BaseComponent {...this.props} {...this.state} . Why is it necessary to spread out the props like that if a component is already being passed in as 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;

推荐答案

答案直接在 docs ：

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

Convention: Pass Unrelated Props Through to the Wrapped Component HOCs add features to a component. They shouldn’t drastically alter its contract. It’s expected that the component returned from a HOC has a similar interface to the wrapped component.

HOC应该通过与其特定$ b $无关的道具关注。大多数HOC都包含一个类似于
的渲染方法：

HOCs should pass through props that are unrelated to its specific concern. Most HOCs contain a render method that looks something like this:

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

To understand this you should know what {...this.props} does. In your case

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} 传播语法适用于。您可以阅读此答案，了解有关如何 <$ c $的详细信息。 c> ... 有效

EnhanceComponent HOC does a simple operation of adding a state name to the component currently being rendered, so essentially when you use this HOC, you should be able to pass the props required by your original component directly to it rather than consuming them in the HOC, which is what {...this.props} spread syntax is for. You can read this answer for more details on how ... works

考虑使用像

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

并定义为

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

         ...
      }
   }

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

Now if you use an HOC over this component like

const EnhancedMyComponent = EnhanceComponent(MyComponent);

您可以将其呈现为

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

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

and now if you don't write {...this.props} in your HOC, then the MyComponent will no longer have className and onClick as props

这篇关于在React高阶组件中传播道具的目的是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！