Reactjs react slick滑块将类组件转换为功能组件

我正在使用react slick…和class component，现在我只想将class component转换为functional component…因为在这些组件中，我需要使用另一个functional component…它遇到了一些问题…有人能帮我解决这个问题吗…在我使用的类（renderArrows=）下面，这个i东西遇到了问题

这是代码沙盒的链接：

import React，{Component}来自'React'；
从“反应网格系统”导入{Col，Row}；
从“@material ui/core”导入{ButtonBase}；
从“@material ui/icons/ArrowBackIos”导入ArrowBackIosIcon；
从“@material ui/icons/ArrowForwardIos”导入ArrowForwardIosIcon；
从“react slick”导入滑块；
类示例扩展组件{
renderArrows=（）=>{
返回(
this.slider.slickPrev（）}
>
this.slider.slickNext（）}
>
);
};
render（）{
返回(
1.教育水平
{this.renderArrows（）}
（this.slider=c）}
点={false}
箭头={false}
centerMode={true}
slidesToShow={1}
无限={false}>
家

关于我们

画廊

);
}
}
导出默认示例；

将组件分类为功能组件：

 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

import React，{Component}来自“React”
从“反应网格系统”导入{Col，Row}
从“@material ui/core”导入{ButtonBase}
从“@material ui/icons/ArrowBackIos”导入ArrowBackIosIcon
从“@material ui/icons/ArrowForwardIos”导入ArrowForwardIosIcon
从“react slick”导入滑块
const renderArrows=（）=>{
返回(
this.slider.slickPrev（）}
>
this.slider.slickNext（）}
>
)
}
常量示例=（）=>{
返回(
1.教育水平
{renderArrows（）}
（this.slider=c）}
点={false}
箭头={false}
centerMode={true}
slidesToShow={1}
无限={false}
>
家
关于我们
画廊
)
}
导出默认示例

还有一件事，我似乎不知道这个.slider.slickNext（）是从哪里来的。我想应该是

this.Slider.slickPrev（）

---

如果我是对的，那么对于functional component，将其更改为

Slider.slickPrev（）

将组件类更改为functional component：

 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

import React，{Component}来自“React”
从“反应网格系统”导入{Col，Row}
从“@material ui/core”导入{ButtonBase}
从“@material ui/icons/ArrowBackIos”导入ArrowBackIosIcon
从“@material ui/icons/ArrowForwardIos”导入ArrowForwardIosIcon
从“react slick”导入滑块
const renderArrows=（）=>{
返回(
this.slider.slickPrev（）}
>
this.slider.slickNext（）}
>
)
}
常量示例=（）=>{
返回(
1.教育水平
{renderArrows（）}
（this.slider=c）}
点={false}
箭头={false}
centerMode={true}
slidesToShow={1}
无限={false}
>
家
关于我们
画廊
)
}
导出默认示例

还有一件事，我似乎不知道这个.slider.slickNext（）是从哪里来的。我想应该是

this.Slider.slickPrev（）

---

如果我是对的，那么对于functional component，将其更改为Slider.slickPrev（）

这可能是最好的答案 我试着用你的样品做了这项工作 请查收

<

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;