0

我有这个界面：

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

然后是这个功能组件：

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。

4

1 回答 1

1

你真的不需要forwardRef这里，请参考：为什么，确切地说，我们需要 React.forwardRef？.

在您的具体示例中：

  • 不要大写您的组件名称，它应该只以大写开头
  • 通过任何道具传递您的 ref，请参阅上面链接中的说明。
  • 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} />;
}
于 2021-08-25T09:29:26.037 回答