如何使 React 光滑的滑块与图标一起使用？

Posted 2023-02-25

【中文标题】如何使 React 光滑的滑块与图标一起使用？

【英文标题】：How to make React slick slider work with icons?

【发布时间】：2020-02-25 20:11:36

【问题描述】：

有显示图标的代码

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;
    

我不仅想显示它们，还想使用 react slick 滑块来显示它们。 ArrowsComponent 和 ZoomTool 是图标的组件。如何在<Slider> .. </Slider> 中正确包装这段代码？

【参考方案1】：

这是我的两种方法

方法一：

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;
    

希望对您有所帮助。