标签: react-forwardref

我知道 refs 用于直接访问 DOM 元素而不改变状态。我读到无法为功能组件提供引用，因为它们没有状态。

Refs 不能附加到函数组件。虽然，我们可以定义 refs 并将它们附加到 DOM 元素或类组件。底线是——函数组件没有实例，所以你不能引用它们。

取自：https : //blog.logrocket.com/cleaning-up-the-dom-with-forwardref-in-react/

我还是不明白。

我正在使用TooltipAnt Design ( https://ant.design/components/tooltip/ ) 中的Button组件、组件和自定义CircleButton组件。

鉴于以下 JSX：

<Tooltip placement="left" title={"Lock slot"}>
  <CircleButton onClick={() => execute(client.close)} icon={<LockOutlined />} disabled={loading} />
</Tooltip>

还有我的 CircleButton 组件。像这样使用，它会产生警告。

const CircleButton = (props) => // gives the warning
  <Button shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />

警告：不能为函数组件提供引用。尝试访问此引用将失败。你的意思是使用 React.forwardRef() 吗？

请注意，尽管有警告，但一切都按预期工作。

如果我按如下方式编辑它，它会正常工作，为什么？

const CircleButton = forwardRef((props, ref) => // doesn't give …

我需要访问组件内文本区域的引用。在组件内，它很简单：

const MyComponent = () => {
  const inputRef = useRef();

  return <textarea ref={inputRef} />
}

现在 ref 在 MyComponent 中可用，我可以将它用于一些内部逻辑。

在某些情况下，我也需要从父组件访问引用。在这种情况下，我可以使用forwardRef：

const MyComponent = React.forwardRef((props, ref) => {
  return <textarea ref={ref} />
})

// In some parent
const MyParent = () => {
  const inputRefFromParent = useRef();
  return <MyComponent ref={inputRefFromParent} />
}

现在我可以从父组件访问 ref textarea，并将其用于父组件中的逻辑。

我发现自己处于这样的情况：我需要使用 中的 ref 进行一些内部逻辑MyComponent，但我可能还需要从 中获取该引用MyParent。我怎样才能做到这一点？

我正在编写一个 React 组件，它可以将 ref 转发给它的孩子

我发现对于函数组件的返回类型，我可以使用ForwardRefExoticComponent和ForwardRefRenderFunction。但我不确定它们之间有什么区别。

到目前为止，当使用ForwardRefExoticComponent 时，我可以扩展它而ForwardRefRenderFunction不能？我在这里发布了一个与我的案例相关的问题：How to export forwardRef with ForwardRefRenderFunction

如果有人知道他们之间的区别以及他们所做的事情，请帮助我。因为 React 团队似乎没有关于它们的文档（但它们在 react 包中）

我正在尝试使用 react 和 typescript 为我们的应用程序创建一个通用的文本输入组件。我希望它能够成为基于给定道具的输入元素或 textarea 元素。所以它看起来有点像这样：

import {TextArea, Input} from 'ourComponentLibrary'

export const Component = forwardRef((props, ref) => {
  const Element = props.type === 'textArea' ? TextArea : Input

  return (
    <Element ref={ref} />
  )
})

这段代码工作正常。然而，当试图合并类型时，它变得有点冒险。ref 类型应该是HTMLInputElement或HTMLTextAreaElement基于传递的typeprop。在我的脑海中，它看起来像这样：

interface Props {
  ...
}

export const Component = forwardRef<
  HTMLInputElement | HTMLTextAreaElement,
  Props
>((props, ref) => {
  ...
});

但是我知道这不完全是我需要的。因此，错误： Type 'HTMLInputElement' is missing the following properties from type 'HTMLTextAreaElement': cols, rows, textLength, wrap …

根据 React 文档，将 ref 传递给子组件的正确方法如下：

import React from 'react';

const Input = React.forwardRef((props, ref) => {
  React.useEffect(() => {
    ref.current.focus();
  }, []);
  return <input type="text" ref={ref} />;
});

export default function App() {
  const inputRef = React.createRef();
  return (
    <div>
      <Input ref={inputRef} />
    </div>
  );
}

但是，如果我尝试将创建的 ref 作为普通 prop 以任何其他名称（然后是“ref”）传递，这也会按预期工作。

import React from 'react';

const Input = (props) => {
  React.useEffect(() => {
    props.inputRef.current.focus();
  }, []);
  return <input type="text" ref={props.inputRef} />;
};

export default function App() {
  const inputRef …

当组件包装在forwardRef 中时，您打算如何处理测试文件中的模拟组件？mockImplementation 不在方法上，而是在属性渲染上。

import React from 'react';
import Component from './Component';
import mocked from 'ts-jest/utils'

jest.mock('./Component');

const mockComponent(Component);

mockComponent.mockImplementation(() => <></>) /* this returns type error that mockImplementation is not a function */

mockComponent.render.mockImplementation(() => <></>) /* this works but get a typescript error */

我看到的打字稿错误是

TS2339: Property 'render' does not exist on type 'MockedFunction   "li", {}>, "button" | "slot" | "style" | "title" | "className" | "classes" | "innerRef" | "selected" | "dense" | "key" | "value" | "defaultChecked" …