使用 ref 进入 class 并挂钩

Question

几年前写的一段class的react代码。

它的代码使用 ref，调用另一个组件 function。

像这样。

源代码

class Login extends React.Component {
  processWindow = null;

  someFunction = () => {
    this.processWindow
  }

  render() {
    <ProgressWindow
       ref={ref => {
         this.processWindow = ref;
       }}
    />

其作品。

但是把class组件改成function组件后就开始出问题了。

另一个组件转换为 function 组件，没有在原始组件中找到任何引用。

我如何向另一个组件添加一些代码？

来自 class 组件的 console.log(ref)

console.log(ref) 来自 function 组件 null

Answer 1

这有帮助吗

import { useRef } from 'react';

function Login(props) {
  const processWindowRef = useRef();

  return (
    <ProgressWindow
      ref={ref => { processWindowRef.current = ref; }}
      // can try 
      // ref={processWindowRef}
     />
  );
});

Beta 文档中有关useRef的更多信息

希望能帮助到你