React forwardRef 的代码演示

下面是一个使用React的forwardRef函数的示例代码：

import React, { forwardRef } from 'react';

const MyComponent = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

const ParentComponent = () => {
  const inputRef = React.createRef();

  const handleClick = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <MyComponent ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;

在上面的代码中，forwardRef函数将一个传递给MyComponent的ref参数转发给它的内部input元素。父组件ParentComponent创建了一个ref，并将它传递给MyComponent。然后，父组件通过点击按钮来调用handleClick函数，这个函数会聚焦在input元素上。这样，通过使用forwardRef和ref参数，可以在父组件中操作子组件的DOM元素。