Javascript 在高阶组件中展开支柱

我正试图深入了解在中国传播道具的目的

因此，以下面的例子

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

export default EnhanceComponent;

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

const EnhancedMyComponent = EnhanceComponent(MyComponent);

并将其渲染为

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

下面是我的两个具体问题

我们最终呈现什么，即BaseComponent或EnhancedMyComponent，或使用HOC允许我们使用任何一种口味，例如，在某些情况下，如果我们不想要增强的功能，我们只使用基本组件

或

道具访问问题是否适用于上述两种消费情况，即

和

1）我们最终呈现的是什么，即BaseComponent或EnhancedMyComponent或使用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={...} />
                     ...
                  )
               }

---

现在在本例中，

EnhancedBaseComponent

和

EnhancedTextComponent

都需要不同的道具，但因为它们都包装在EnhanceComponent中。它不知道该传递哪些道具。因此，传播它，并发送所有道具。

非常感谢……您与我所寻找的非常接近……唯一的事情是（1），如果您能够为这两种情况添加一些骨架代码，让我更清楚，那将是非常棒的。对不起，我的不好，添加了骨架代码。您非常棒……不过，对于第二种口味，您将是一个后续，你说（为了不允许任何人直接使用该组件，将其包装在HOC中并导出）我明白了，你已经完成了导出默认增强组件（BaseComponent）；但是，在用法中，我看到您使用了BaseComponent。我是不是遗漏了什么？非常感谢。在导入中，我使用了文件名BaseComponent本身。它可以被命名为任何东西。当我们导入组件时，不知道它是如何导出的。我们希望在导入时它是BaseComponent，而不知道内部导出。哦，好吧……那么实际上它是在本例中导入和使用的组件增强组件（BaseComponent），我们没有直接使用/使用组件类BaseComponent，对吗？

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

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

// 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={...} />
                     ...
                  )
               }

// 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={...}/>
                 ...
              )
           }

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