为什么 ForwardRef 在使用 pair 标签时会导致错误

Question

我的 React 应用程序中有 3 个 tsx (jsx) 文件：

我的index.tsx:

import ReactDOM from 'react-dom';
import Page from './Page';

ReactDOM.render(
    <Page />,
  document.getElementById('root')
);

然后我的 Page.tsx（我在索引 ↑ 中呈现）：

import React from "react";
import Menu from "./Menu";

export default (props: any) => {
    let rf = React.useRef<HTMLDivElement>();
    return (
        <Menu ref={rf}>
        </Menu>
    )
}

还有我的 Menu.tsx，它使用 forwardRef:

import React from "react"

export default React.forwardRef((props, ref:any) => {
    return (
        <div ref={ref}>
        </div>
    )
})

问题是，它在 Page.tsx 中给我错误（在 VS 代码中带有下划线的打开菜单标签）：

Type '{ children: never[]; ref: MutableRefObject<HTMLDivElement | undefined>; }' is not assignable to type 'IntrinsicAttributes & RefAttributes'.
Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes'.ts(2322)

当我从菜单中删除封闭标签（将其更改为自关闭元素）时，它起作用了：

import React from "react";
import Menu from "./Menu";

export default (props: any) => {
    let rf = React.useRef<HTMLDivElement>();
    return (
        <Menu ref={rf} />
    )
}

但我希望（需要）i 配对（以便向其写入子元素）。

我该如何解决？谢谢！ :)

Answer 1

<Tag/>表示没有children。 <Tag></Tag> 表示需要 children.

所以你的错误基本上是告诉你你试图发送 children，但是你的 <Menu/> 组件没有说它需要任何东西。

解决方案 react.forwardRef 采用两个通用参数，第一个是 DOM 元素的类型，您也将转发 ref，第二个是它需要的道具。

因此，使用此信息，我们应该能够通过执行 ->

来转换您的示例

import React from "react"

export default React.forwardRef<HTMLDivElement,{children: React.ReactNode}>(
(props, ref) => {
    return (
        <div ref={ref}>
           {props.children}
        </div>
    )
})

您还会注意到我还删除了 ref 上的 any，现在可以正确输入了。

您的另一个问题还在于您如何发送 ref，您将收到 'MutableRefObject<HTMLDivElement | undefined>'、

这是因为您没有为 React.useRef 提供值，所以该值确实可以是 HTMLDivElement 或未定义，这就是错误的意思。

简单的解决方案就是将默认设置为空，TS 会很高兴。这是有效的，因为 MutableRefObject<T | null>，而 null 实际上是一个有效的 React 组件，基本上就像一个无操作渲染。

例如

let rf = React.useRef<HTMLDivElement>(null);

这是一个有效的 TS 片段.. TS Playground

为什么 ForwardRef 在使用 pair 标签时会导致错误

Why is ForwardRef causing error when using pair tag

javascript

reactjs

react-ref

react-forwardref