我如何在 React 函数 class 上调用函数？

Question

我想通过访问 useRef.current 来调用 class 上的函数，方法与访问 class 组件和 DOM 对象的方式相同。我知道关于 DOM 和 class 实例等的所有规则，这使得 useRefs 成为可能，但我如何调用 myfunctioncomponent.method()?

演示错误的沙盒：

https://codesandbox.io/s/class-vs-function-useref-zjee5?file=/src/App.js

错误：

警告：函数组件不能被赋予引用。尝试访问此 ref 将失败。您是要使用 React.forwardRef() 吗？

代码：

export const App = () => {
  let functionref = useRef(null);
  let domref = useRef(null)
  let classref = useRef(null);

  useEffect(() => {
    console.log(functionref); // fails :(
    console.log(domref); // works! 
    console.log(classref); // works !
    classref.current.callme(); // works!
    classref.current.callme(); // fails!
  }, []);
  return (
    <>
      <ClassComponent ref={classref}/>
      <div ref={domref}>This is a DOM node</div>
      <FunctionComponent ref={functionref} />
    </>
  );
};

class ClassComponent extends React.Component {
  callme() {
    console.log("ClassComponent function called!");
  }
  render() {
    return (
      <p>This is a class component</p>
     )
  }
}

const FunctionComponent = () => {
  const callme = () => {
    console.log("function called!");
  }

  return (
   <p>This is a function component</p>
  )
}

也许我想过多地改变规则或引入反模式（？）如果是的话，我非常感谢有关访问功能组件或替代品中功能和属性的正确方法的建议。

感谢任何帮助。

Answer 1

对于您要尝试做的事情，您需要使用 forwardRef 以便将 ref 传递给功能组件，我在下面放了一个示例片段。在 class 组件中，ref 允许您访问 class 组件方法，但是当您使用 react 功能组件执行此操作时，不会发生这种情况。相反，您只需取回 ref，由您决定 ref 中的内容。这就是为什么在下面的代码片段中您需要添加 ref.current = { callme } 以便 callme 方法在被调用为 functionref.current.callme().

时可用

const FunctionComponent = React.forwardRef((_props, ref) => {
  const callme = () => {
    console.log("function called!");
  };

  ref.current = { callme };

  return <p>This is a function component</p>;
});

这是一个codesandbox of that

我如何在 React 函数 class 上调用函数？

How can i call a function on a React functional class?

reactjs

react-functional-component

use-ref