如何在React功能组件中创建高阶功能
我正在尝试使用React功能组件创建一个事件,该功能组件将采用组件和一些道具,但是我认为我缺少某些东西,我没有在我通过的组件中获得道具值。我还使用TypeScript
我的高阶组件:
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 ()
}
I am trying to create a HOC using react functional component that will take a component and some props, but I think I am missing something I did not get the props value in the component which I passed. I am also using typescript
My higher-order component:
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;
From here I am passing the component to the higher-order component
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;
I am getting games undefined
interface EditChannelInfoWrapper {
games: any;
}
const EditChannelInfoWrapper = (
props: EditChannelInfoWrapper,
): ReactElement => {
const {
games,
} = props;
console.log(games);
return ()
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
看来您没有将
GAMES
Prop传递给组件
此处:&lt; component {... props}/&gt;
。添加您的游戏道具,它应该按预期工作
&lt;组件{... props} games = {games} /&gt; < /code>
It looks like you're not passing your
games
prop to theComponent
here:<Component {...props} />
.Add in your games prop and it should work as expected
<Component {...props} games={games} />