There is a code that displays icons
switch (name) {
case Header.Arrows.name:
return <ArrowsComponent key={name} color={color}/>;
case Header.Zoom.name:
return <ZoomTool key={name} color={color}/>;
default:
return null;
}
I want to not just display them but do it using the react slick slider. ArrowsComponent and ZoomTool are the components for icons. How to properly wrap this code in <Slider> .. </Slider>
?
Here are my two ways
switch (name) {
case Header.Arrows.name:
return (
<Slider>
<ArrowsComponent key={name} color={color}/>
</Slider>
);
case Header.Zoom.name:
return (
<Slider>
<ZoomTool key={name} color={color}/>
</Slider>
);
default:
return null;
}
const renderSlider = (child) => {
return (
<Slider>
{child}
</Slider>
);
};
switch (name) {
case Header.Arrows.name:
renderSlider(<ArrowsComponent key={name} color={color}/>);
case Header.Zoom.name:
renderSlider(<ZoomTool key={name} color={color}/>);
default:
return null;
}
Hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.