reactjs - 如何使用函数组件向 ref 公开函数？

Question

我想创建一个组件，比如说一个日历功能组件，它可以公开一些函数，例如 nextMonth、prevMonth 等。以便使用它的父组件可以访问这些函数使用ref。使用类组件很容易，因为实例方法会自动公开。如何使用功能组件实现相同的目标？我知道我可以为此使用渲染 Prop 模式。但还有其他解决方案吗？

粗略示例:

function Calendar() {
   const nextMonth = () => {...}
   const prevMonth = () => {...}

   return (
      <div>.....</div>
   )
}


function Parent() {
   const cal = createRef();

   const onNext = () => {
     cal.current.nextMonth();
   }

   return (
     <>
        <Calendar ref={cal} />
        <button onClick={onNext}>Next</button>
     </>
   )
}

Answer 1

您可以使用useImperativeHandle钩子(Hook)。

const Calendar = React.forwardRef((props, ref) => {
  const [month, setMonth] = useState(0)
  const nextMonth = () => { setMonth((prev) => prev + 1) }
  const prevMonth = () => { setMonth((prev) => prev - 1) }

  useImperativeHandle(ref, () => ({
    nextMonth,
    prevMonth
  }));

  return (
    <div>{month}</div>
  )
})

const Parent = () => {
  const cal = useRef()

  const onNext = () => {
    cal.current.nextMonth()
  }

  return (
    <React.Fragment>
      <Calendar ref={cal} />
      <button type="button" onClick={onNext}>Next</button>
    </React.Fragment>
  )
}