React-slick滑块不在jsdom上渲染

Question

我使用jsdom来呈现我的react组件，其中一个组件是react-slick滑块，因此该滑块在服务器上无法正确呈现。

代码如下：

class GallerySlider extends React.PureComponent {
  render() {
    let { children, initialSlide, afterChange } = this.props;
    const LeftNav = <Icon color="white" name="arrow-left" />;
    const RightNav = <Icon color="white" name="arrow-right" />;

    let settings = {
      accessibility: true,
      adaptiveHeight: false,
      autoplay: false,
      className: "media-gallery__gallery--slider",
      dots: false,
      //infinite: false, // Currently doesn't work in combination with lazyload. Should turn-off when fixed.
      lazyLoad: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      speed: 250,
      prevArrow: LeftNav,
      nextArrow: RightNav,
      initialSlide: initialSlide || 0,
      afterChange: afterChange
    };

    return (
      <div className="media-gallery__gallery-slider">
        <Slider ref="slider" {...settings}>
          {children}
        </Slider>
      </div>
    );
  }
}

export default GallerySlider;

它看起来像这样：screenshot

呈现的代码如下：code_rendered有人能帮我一下吗？

Answer 1

我在docs中找到了这个：

⚠️还为css和字体安装了slick-carousel

npm install slick-carousel

// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

或在html中添加cdn链接

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />