我们是否可以使用HOC将功能组件封装在React中？

Question

我正在尝试创建一个react应用程序来演示功能组件的临时工作。我有两个场景，其中一个按钮和一个标题显示了在按钮上执行的点击次数，以及在标题上使用相同的内部代码进行鼠标切换的次数。但是，如前所述，我得到了错误。这个错误解释了钩子规则被打破了。我可以看出，在非功能组件中使用钩子是不正确的。我只想知道是否有可能使用自组织封装功能组件。另外，如果可以将功能组件封装在特定的内部，那么我应该在哪里更改代码呢？

这是我的特别代码

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组件一样；临时组件不知道也不关心您给它的是哪种组件。如果您查看文献资料中的HOCs示例，您会注意到它们都返回函数(在该页面中是构造函数)：

//这个函数需要一个组件..。函数withSubscription(WrappedComponent，selectData) { // ...and返回另一个组件.返回类扩展React.Component { // . }；}

class表达式的结果是类的构造函数。一个特殊函数返回它构建的新包装器组件。您的函数将返回React.createElement的结果。

您需要返回增强组件(无论是函数还是class组件)，而不是将特殊函数本身编写为组件：

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，因为它不是一个(简单的)组件，它是一个临时组件。
• 如果它返回增强的组件。
• 让增强的组件接受它传递给包装组件的道具。

活生生的例子：

​

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>

​