在 React 高阶组件中传播 props

Question

我正在尝试 go 非常深入地了解在 React HOC 中传播道具的目的

所以以下面的例子为例；

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

export default EnhanceComponent;

现在让我们说 BaseComponent 的用法如下；

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

我假设如果没有在 HOC 中传播道具，我们将无法访问 BaseComponent 中的“this.props.className”或“this.props.onClick”。 那会是正确的理解吗？

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

         ...
      }
   }

现在要使用 HOC 本身，我们会说；

const EnhancedMyComponent = EnhanceComponent(MyComponent);

并将其渲染为

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

现在，以下是我的 2 个具体问题；

1. 我们最终渲染什么，即 BaseComponent 或 EnhancedMyComponent 或者使用 HOC 允许我们使用任何一种风格，例如在某些情况下，如果我们不想要增强的功能，我们只使用基本组件？

或者

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

2. 道具访问问题，即如果我们不传播道具，是否适用于上述两种消费情况，即<BaseComponent />和<EnhancedMyComponent /> ？

Answer 1

1）我们最终渲染什么，即 BaseComponent 或 EnhancedMyComponent 或者使用 HOC 允许我们使用任何一种风格，例如在某些情况下，如果我们不想要增强的功能，我们只使用基本组件？

/ 使用 HOC 允许我们使用任何一种风格。 这完全取决于我们在 HOC 中包装组件的位置，即在导出或在某个地方使用它时。

现在，在以下情况下，可以选择在有或没有 HOC 的情况下使用它

// BaseComponent.js 
        class BaseComponent extends React.Component {
                  render() {
                     const { className, onClick} = this.props;
            
                     ...
                  }
               }
    export default BaseComponent;
    
    // SomeComponent.js
    import BaseComponent from './BaseComponent';

    const MyComponent = EnhanceComponent(BaseComponent);
    class SomeComponent extends React.Component {
                  render() {
                     return ( 
                     ...
                     <MyComponent className={...} onClick={...} someExtraPropForHOC={...}/>
                     <BaseComponent  className={...} onClick={...} />
                     ...
                  )
               }

为了不允许任何人直接使用组件，将其包装在 HOC 中并导出

// BaseComponent.js 
    class BaseComponent extends React.Component {
              render() {
                 const { className, onClick} = this.props;
        
                 ...
              }
           }
export default EnhanceComponent(BaseComponent);

// SomeComponent.js
import BaseComponent from './BaseComponent';
class SomeComponent extends React.Component {
              render() {
                 return ( 
                 ...
                 <BaseComponent className={...} onClick={...}/>
                 ...
              )
           }

2）如果我们不传播道具，道具访问问题是否适用于上述两种消费情况，即AND？

/ 需要传播道具，因为 HOC 不知道动态包装的组件需要哪些道具。 所以通过所有即将到来的道具是唯一可能的方法。

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

         ...
      }
   }

class CustomTextField extends React.Component {
      render() {
         const { className, onKeyPress, value} = this.props;

         ...
      }
   }

const EnhancedBaseComponent = EnhanceComponent(BaseComponent);
const EnhancedTextComponent = EnhanceComponent(CustomTextField);

现在在这种情况下， EnhancedBaseComponent和EnhancedTextComponent都需要不同的 props，但是因为它们被包装在 EnhanceComponent 中。 它不知道要通过哪些道具。 所以传播它并将所有道具发送给它。