反应光滑的滑块不通过道具

Question

我有几个带有 Slider 的组件。在第一个组件中，我收到道具。但是在第二个组件中我没有收到道具。下面是我的组件代码：

import React, { Component } from "react";
import Slider from "react-slick";

export default class PartersSlider extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
  }
  next() {
    this.slider.slickNext();
  }
    previous() {
    this.slider.slickPrev();
  }
  render() {
    const settings = {
      slidesToShow: 5,
      slidesToScroll: 1,
      arrows: true,
      infinite: true,
      responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      }, {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }, {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }]
    }
    return (
      <div>
        <div className="col-md-12 mb-4 d-flex justify-content-between">

        </div>
      </div>
    );
  }
}

在这个例子中我ll receive props if i会这样console.log(this.slider);

这第二个组成部分

import React, { Component } from "react";
import Slider from "react-slick";

export default class SliderOfComments extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
  }
  next() {
    console.log(this.slider);
    // this.slider.slickNext();
  }
  previous() {
    // this.slider.slickPrev();
  }
  render() {
    const settings = {
      arrows: true,
      slidesToShow: 2,
      infinite: true,
      slidesToScroll: 1,
    }
    return (
      <div className="row">
       // code
      </div>
    );
  }
}

这里 this.slider 返回给我 undefined

Answer 1

我忘记将此代码添加到第二个 Slider 组件

ref={c => (this.slider = c)}

P.S对不起

反应光滑的滑块不通过道具

React slick slider doesn`t pass props

javascript

reactjs

react-slick