使用 Hooks 访问组件方法

【问题标题】：Accessing component methods with Hooks使用 Hooks 访问组件方法
【发布时间】：2025-12-24 09:50:16
【问题描述】：

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

如何在上面翻译以使用功能组件/钩子。

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

<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>

【问题讨论】：

@codekaizer 是的，我知道我可以单击这些点来转换到另一个选项卡，但我想自定义导航样式并将我的下一个/上一个绑定到一个按钮。上面的当前示例不起作用。这纯粹是为了自我教育如何从文档中访问方法。请参阅上面的示例链接。

标签： reactjs react-hooks antd

【解决方案1】：

您可以从<Carousel />ref 访问next() api。有了函数组件，你可以使用useRef钩子，像这样：

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

【讨论】：

感谢一个干净的例子:)
@MoshFeu 如何从父组件访问App 中声明的next？ <AppWrapper><App></App></AppWrapper> 在这个例子中，我需要从AppWrapper 调用next。
@BrunoFinger 我猜它与Carousel 无关。无论如何，您可以将其作为道具传递给 App。在AppWrapper - <App doSomthing={() => console.log('do something') />。