如何使用功能组件向 ref 公开功能？

Question

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

粗略的例子：

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钩子。

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

Answer 2

在功能组件中，您可以使用forwardRef 将 ref 传递给子组件。

const Calendar = React.forwardRef((props, ref) => {
  const nextMonth = () => {...};
  const prevMonth = () => {...};

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

function Parent() {
  const cal = useRef(null);

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

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

这项工作：

const Calendar = React.forwardRef((props, ref) => {
  const nextMonth = () => console.log("nextMonth");
  const prevMonth = () => console.log("prevMonth");
  ref.current = { nextMonth, prevMonth };
  return <div>.....</div>;
});

function Parent() {
  const cal = useRef(null);

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

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

Answer 3

虽然@Matthieu Libeer 的答案是正确的，这应该对您有用，但您仍然可以考虑以 React 方式进行。现在您的Calendar 与uncontrolled component 相同。通过 ref 访问它的内部状态（以及基于类的组件的方法），你就输了：

1. 能够进行预输入验证（例如，放弃每月第二个星期日的选择）
2. 用不同的组件轻松替换它

一旦它成为完全可控的组件 + 与 props 名称中的原生控件保持一致，你会得到类似的东西

<Calendar value={currentData} onChange={this.validateAndSetDate} />

这样可以很容易地用兼容的组件替换它（比如<input type="date" />），并且验证更容易。你可能仍然需要 forwardRef 对 .focus() 说命令，但其他方面的痛苦会减少。

Answer 4

尽管这不是真正的 React 方式，但您可以这样做。 诀窍是在Calendar 中设置ref 的当前值。

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

  ref.current = { nextMonth, prevMonth } // eslint-disable-line

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