在 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 中。 它不知道要通過哪些道具。 所以傳播它並將所有道具發送給它。