如何使用 HoC 包装包含钩子的函数

Question

正如标题所暗示的那样，我希望能够在HoC中包装一个函数(包含(钩子。

在下面的示例中，我希望能够使用className="someClassName"div的元素标记包装 JSX 来自TestView。但是，我得到以下异常：

钩子只能在函数组件的主体内部调用。 这可能是由于以下原因之一而发生的： 1. 你可能有不匹配的 React 和渲染器版本(比如 React DOM( 2.你可能违反了钩子的规则 3. 您可能在同一应用程序中有多个 React 副本 有关如何调试和 修复此问题

import React, { Component } from 'react'
function wrap(component) {
let calledComponent = component()
return (
<div className="someClassName">
{calledComponent}
</div>
);
}

function TestView() {
const [ val, setValue] = React.useState('Initial Value');
return (
<div>
<input type="text" value={val} onChange={event=>setValue(event.target.value)}/>
</div>
)
}
export default wrap(TestView);

Answer 1

具体来说，高阶组件是一个采用 组件并返回一个新组件。 反应文档

所以，你必须有一个返回组件的函数，也许是这样的。

import React, { useState } from 'react';
import '../styles.css';
const withStyle = WrappedComponent => {
return function WithStyle() {
return (
<div className='myClassStyle'>
<WrappedComponent />
</div>
);
};
};
function TestView() {
const [val, setVal] = useState('Initial Value');
return (
<div>
<input type='text' value={val} onChange={e => setVal(e.target.value)} />
</div>
);
}
export default withStyle(TestView);