reactjs - 反应光滑的滑块将类组件转换为功能组件

Question

我正在使用react slick ...并使用类组件，现在我只想将类组件转换为功能组件...因为在这些组件中我需要使用另一个功能组件...它遇到了一些问题...。任何人都可以在这件事上提供帮助...在我使用过的类（renderArrows =）之下，我的事情出现了问题...

这是代码沙盒的链接：https ://codesandbox.io/s/jovial-smoke-ndzhj

 import React, {Component } from 'react';
    import { Col, Row } from 'react-grid-system';
    import { ButtonBase } from '@material-ui/core';
    import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
    import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
    import Slider from "react-slick";



    class Example extends Component {
        renderArrows = () => {
            return (
                <div className="slider-arrow">
                    <ButtonBase
                        className="arrow-btn prev"
                        onClick={() => this.slider.slickPrev()}
                    >
                        <ArrowBackIosIcon />
                    </ButtonBase>
                    <ButtonBase
                        className="arrow-btn next"
                        onClick={() => this.slider.slickNext()}
                    >
                        <ArrowForwardIosIcon />
                    </ButtonBase>
                </div>
            );
        };
        render() {
            return (
                <div>

                    <Col xl={12} lg={12} md={12} sm={12} xs={12} className="desktop-slider">
                        <div className="education-level main-boxes boxex-bottom">
                            <Row className="row">
                                <Col xl={4} lg={4} md={4} sm={12} xs={12}>
                                    <div className="index-box-head horizontal-box-head">
                                        1. Education Level
                                                </div>
                                </Col>
                                <Col xl={8} lg={8} md={8} sm={12} xs={12}>
                                    <div style={{ position: "relative" }}>
                                        {this.renderArrows()}
                                        <Slider
                                            ref={c => (this.slider = c)}
                                            dots={false}
                                            arrows={false}
                                            centerMode={true}
                                            slidesToShow={1}
                                            infinite={false}>
                                               <li>Home
                                                 </li>
                                               <li>About Us
                                                 </li>
                                               <li>Gallery
                                                 </li>


                                            </Slider>


                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </Col>
                </div>
            );
        }
    }

    export default Example;

标签： reactjs

Answer 1

这可能是我尝试过的最佳答案，并与您一起使用示例检查请

https://codesandbox.io/s/infallible-turing-wgvrb?file=/src/App.js

import React, { useRef } from "react";
import { Col, Row } from "react-grid-system";
import { ButtonBase } from "@material-ui/core";
import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos";
import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
import Slider from "react-slick";

const Example = () => {
  const customSlider = useRef();

  const renderArrows = () => {
    return (
      <div className="slider-arrow">
        <ButtonBase
          className="arrow-btn prev"
          onClick={() => customSlider.current.slickPrev()}
        >
          <ArrowBackIosIcon />
        </ButtonBase>
        <ButtonBase
          className="arrow-btn next"
          onClick={() => customSlider.current.slickNext()}
        >
          <ArrowForwardIosIcon />
        </ButtonBase>
      </div>
    );
  };

  return (
    <div>
      <Col xl={12} lg={12} md={12} sm={12} xs={12} className="desktop-slider">
        <div className="education-level main-boxes boxex-bottom">
          <Row className="row">
            <Col xl={4} lg={4} md={4} sm={12} xs={12}>
              <div className="index-box-head horizontal-box-head">
                1. Education Level
              </div>
            </Col>
            <Col xl={8} lg={8} md={8} sm={12} xs={12}>
              <div style={{ position: "relative" }}>
                {renderArrows()}
                <Slider
                  ref={slider => (customSlider.current = slider)}
                  dots={false}
                  arrows={false}
                  centerMode={true}
                  slidesToShow={1}
                  infinite={false}
                >
                  <li>Home</li>
                  <li>About Us</li>
                  <li>Gallery</li>
                </Slider>
              </div>
            </Col>
          </Row>
        </div>
      </Col>
    </div>
  );
};

export default Example;