为什么回调函数不能在HOC组件中工作?

Question

我将状态(setActive)传递给ButtonsOur组件。此外，通过回调，我将setActive传递给HOC，但我得到了这个错误"未捕获的TypeError: setActive不是一个函数"。为什么它不工作，我该如何解决这个问题?在ButtonsOur组件中，我通过props从父组件传递setActive

这是我的ButtonsOur组件

import HOC from '../../../hoc/HocPopUp';
function ButtonsOur({ setActive, open }) {
return (
<div className="base__routes__button">
<Buttons className="base__button__moreInf open-popup-exc" Click={open(setActive)}>Докладніше</Buttons>
<Buttons className="base__button__moreInf open-popu p-exc" Click={open(setActive)}>Забронювати</Buttons>
</div>
);
}
export default HOC(ButtonsOur);

这是HOC

const HOC = (Component) => {
function HandleChange(props) {
function open(setActive) {
setActive(true);
}
function close(setActive) {
setActive(false);
}
return (
<Component
close={() => close}
open={() => open}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
);
}
return HandleChange;
};
export default HOC; 

Answer 1

HOC没有从传入的props中读取setActive,open。

你还需要在早期传递原始的道具，并让HOC中的道具在必要时覆盖它们。

const HOC = (Component) => {
function HandleChange(originalProps) {
function open(setActive) {
originalProps.setActive(true);
}
function close(setActive) {
originalProps.setActive(false);
}
return (
<Component
// eslint-disable-next-line react/jsx-props-no-spreading
{...originalProps}
close={close}
open={open}
/>
);
}
return HandleChange;
};