为 function 组件响应 forwardRef

Question

我有这个界面：

export interface INTERFACE1{
  name?: string;
  label?: string;
}

然后这个 function 组件：

export function FUNCTION1({
  name,
  label
}: INTERFACE1) {
  return (
    <CustomComponent name={name} label={label} />
  );
}

我的目标是从另一个组件访问此CustomComponent 。 我尝试在界面中添加ref: React.createRef<any>但它没有点击。根据我的研究，我似乎需要使用forwardRef但大多数在线示例似乎都不起作用。 任何想法如何从外部，从不同的组件引用我的CustomComponent ，就像这样？

import React, { useCallback, useEffect, useState, createRef } from 'react';
import { FUNCTION1 } from 'FUNCTION1';

interface INTERFACE2 {
  loading: boolean;
}

export default function FUNCTION2({
  loading
}: INTERFACE2) {
  const areaRef = createRef<HTMLTextAreaElement>();

  return (
    <>
          <FUNCTION1
            name="NAME"
            label="LABEL"
            ref={areaRef}
          />
    </>
  );
}

areaRef抛出一个错误，我应该使用forwardRef 。

Answer 1

你在这里真的不需要forwardRef ，请参考： Why, exactly, do we need React.forwardRef? .

在您的具体示例中：

• 不要大写你的组件名称，它应该只以资本开头
• 通过任何道具传递您的参考，请参阅上面链接中的解释。
• 在 function 组件中使用 hook useRef ， createRef用于类。

function Foo2() {
  const areaRef = useRef();

  // Check ref
  useEffect(() => {
    console.log(areaRef.current);
  }, []);

  return <CustomComponent inneRef={areaRef} />;
}

function CustomComponent({ innerRef }) {
  return <textArea ref={innerRef} />;
}