Как заставить слайдер React Slick работать с иконками? - PullRequest
Новая
       9

Как заставить слайдер React Slick работать с иконками?

0 голосов
/ 25 февраля 2020

Существует код, который отображает значки 

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

Я хочу не просто отображать их, а делать это с помощью ползунка «Слайк реагирования». ArrowsComponent и ZoomTool являются компонентами для значков. Как правильно обернуть этот код в <Slider> .. </Slider>?

1 Ответ

0 голосов
/ 25 февраля 2020

Вот мои два способа

Метод 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;
    }

Метод 2 

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

Надеюсь, что поможет.

...