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

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;

Answer 1

这可能是最好的答案 我尝试过并与您一起进行这项工作 请检查

https://codesandbox.io/s/gracious-chatelet-734qj?file=/src/App.js:0-1900

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.slickNext()}
        >
          <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;

Answer 2

从类组件到功能组件：

 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'

    const 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>
      )
    }

    const Example = () => {
      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={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

还有一件事，我似乎不知道this.slider.slickNext()的来源。我认为应该是this.Slider.slickPrev()。

如果我是对的，则将功能组件更改为Slider.slickPrev()