[英]How to create higher order function in react functional component
我正在嘗試使用 react 功能組件創建一個 HOC,該組件將采用一個組件和一些道具,但我認為我遺漏了一些我沒有在我傳遞的組件中獲得道具值的東西。 我也在使用打字稿
我的高階組件:
interface EditChannelInfo {
Component: any;
setIsCollapsed: Function;
isCollapsed: boolean;
}
const EditChannelInfo = (props: EditChannelInfo): ReactElement => {
const {isCollapsed, setIsCollapsed, Component} = props;
const {data: gamesList} = useGamesList();
const games = gamesList.games.map((list: GamesList) => ({
value: list.gameId,
label: list.gameName,
}));
return <Component {...props} />;
};
export default EditChannelInfo;
從這里我將組件傳遞給高階組件
import EditChannelInfoWrapper from '../EditChannelInfoWrapper';
const Dashboard: NextPage = (): ReactElement => {
const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
return (
<div>
<EditChannelInfo
Component={EditChannelInfoWrapper}
setIsCollapsed={setIsCollapsed}
isCollapsed={isCollapsed}
/>
</div>
);
};
export default Dashboard;
我得到未定義的游戲
interface EditChannelInfoWrapper {
games: any;
}
const EditChannelInfoWrapper = (
props: EditChannelInfoWrapper,
): ReactElement => {
const {
games,
} = props;
console.log(games);
return ()
}
看起來您沒有在這里將games
道具傳遞給Component
: <Component {...props} />
。
添加您的游戲道具,它應該可以按預期工作<Component {...props} games={games} />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.