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

Posted 2023-02-25

【中文标题】反应光滑的滑块不通过道具

【英文标题】：React slick slider doesn`t pass props

【发布时间】：2020-04-27 12:26:44

【问题描述】：

我有几个带有 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 ill 像这样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

【参考方案1】：

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

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

P.S 对不起