我們可以使用 HOC 在 React 中包裝功能組件嗎

Question

我正在嘗試創建一個反應應用程序來演示 HOC 在功能組件上的工作。 我有兩種情況，其中一個按鈕和一個標題顯示在按鈕上執行的點擊次數和在標題上使用相同代碼的鼠標懸停在內部。 但是，我收到上述錯誤。 該錯誤說明掛鈎規則已損壞。 我可以看到在非功能組件中使用鈎子是不正確的方法。 我只是想知道是否可以使用包裝功能組件的 HOC。 另外，如果可以將功能組件包裝在 HOC 中，那么我在哪里更改我的代碼？

這是我的 HOC 代碼

import React, { useState } from "react";

const Count = (Component) => {
  const [count, setCount] = useState(0);
  const incrementHandler = (e) => {
    setCount((prevState) => {
      return prevState + 1;
    });
  };
  return <Component count={count} incrementHandler={incrementHandler} />;
};

export default Count;

這是我的 ClickCounter 組件

import React from "react";
import Count from "../HOC/CountHOC";

const ClickCounter = (props) => {
  return (
    <div>
      <button onClick={props.incrementHandler}>
        Clicked {props.count} times
      </button>
    </div>
  );
};

export default Count(ClickCounter);

這是我的 HoverCounter 代碼

import React from "react";
import Count from "../HOC/CountHOC";

const HoverCounter = (props) => {
  return (
    <div>
      <h1 onMouseOver={props.incrementHandler}>Hovered {props.count} times</h1>
    </div>
  );
};

export default Count(HoverCounter);

Answer 1

是的，您可以像包裝 class 組件一樣包裝class組件。 如果您查看文檔中的 HOC 示例，您會注意到它們都返回函數（在該頁面的情況下，構造函數）：

 // This function takes a component... function withSubscription(WrappedComponent, selectData) { //...and returns another component... return class extends React.Component { //... }; }

class表達式的結果是 class 的構造函數 function。 HOC function 返回它構建的新包裝器組件。 您的React.createElement改為返回 React.createElement 的結果。

您需要返回增強組件（無論是 function 還是class組件），而不是將 HOC function 本身作為組件編寫：

const withCount = (Component) => {
    return function(props) {
        const [count, setCount] = useState(0);
        const incrementHandler = (e) => {
            setCount((prevState) => {
                return prevState + 1;
            });
        };
        return <Component {...props} count={count} incrementHandler={incrementHandler} />;
    };
};

我在那里所做的更改是：

• 將Count更改為withCount ，因為它不是（簡單）組件，而是 HOC。
• 讓它返回增強的組件。
• 讓增強組件接受它傳遞給包裝組件的道具。

現場示例：

 const { useState } = React; const withCount = (Component) => { return function(props) { const [count, setCount] = useState(0); const incrementHandler = (e) => { setCount((prevState) => { return prevState + 1; }); }; return <Component {...props} count={count} incrementHandler={incrementHandler} />; }; }; const ClickCounter = (props) => { return ( <div> <button onClick={props.incrementHandler}> Clicked {props.count} times </button> </div> ); }; const EnhancedClickCounter = withCount(ClickCounter); ReactDOM.render(<EnhancedClickCounter />, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>