Javascript 如何使React slick滑块与图标一起工作？

有一个显示图标的代码

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;
    }

开关（名称）{
case Header.Arrows.name：
返回；
case Header.Zoom.name：
返回；
违约：
返回null；
}

我不仅想显示它们，而且想使用react slick滑块来显示它们。箭头组件和缩放工具是图标的组件。如何在

中正确包装此代码？
以下是我的两种方法

方法1：
开关（名称）{
case Header.Arrows.name：
返回(
);
case Header.Zoom.name：
返回(
);
违约：
返回null；
}

方法2
const renderSlider=（子项）=>{
返回(
{child}
);
};
交换机（名称）{
case Header.Arrows.name：
渲染器滑块（）；
case Header.Zoom.name：
渲染器滑块（）；
违约：
返回null；
}

希望有帮助