reactjs - 使用 Hooks 访问组件方法

Question

我正在尝试按照此文档 Carousel 制作一个简单的轮播。

工作中example

我如何翻译上面的内容以使用功能组件/ Hook 。

我一直在尝试在 onClick 按钮中绑定(bind) next() 但我似乎无法让它工作。如何正确访问下一个方法并将其绑定(bind)在我的按钮中？

<Carousel ref={c => (this.slider = c)} >
  <div>
    <h3><Button onClick={() => this.carousel.next()}>1</Button></h3>
  </div>
  <div>
    <h3><Button onClick={() => this.carousel.prev()}>2</Button></h3>
  </div>
  <div>
    <h3>3</h3>
  </div>
  <div>
    <h3>4</h3>
  </div>
</Carousel>

Answer 1

您可以访问 next() api来自<Carousel /> ref 。通过函数组件，可以使用 useRef 钩子(Hook)，像这样:

import React, { useRef } from "react";
import { Carousel } from "antd";

export function App() {
  const carousel = useRef(null);
  function next() {
    carousel.current.next();
  }
  return (
    <div>
      <Carousel ref={carousel}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
      </Carousel>
      <button onClick={next}>Next</button>
    </div>
  );
}

https://codesandbox.io/s/carousel-react-ref-hook-next-492gv