我正在嘗試使用 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 ()
}
uj5u.com熱心網友回復：
看起來你沒有將你的games道具傳遞給Component這里：<Component {...props} />。
添加您的游戲道具，它應該可以按預期作業<Component {...props} games={games} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/484896.html
標籤：javascript 数组 反应 功能 高阶函数
下一篇：python函式更改超引數名稱