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

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 代码中，打开菜单标记带有下划线）：

输入“{children: never[];参考：MutableRefObject; }' 不可分配给类型 'IntrinsicAttributes & RefAttributes'.
类型上不存在属性“children” '内在属性和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

表示没有子项。
表示接受子项。

所以你的错误基本上是告诉你你试图发送孩子，但你的

组件没有说它需要任何东西。

解决方案 react.forwardRef 采用两个通用参数，第一个是您将转发引用的 DOM 元素的类型，第二个是它采用的 props。

因此，使用此信息，我们应该能够通过执行 -> 来转换您的示例

import React from "react"

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

您还会注意到，我还取出了参考文献中的 any，现在可以正确输入了。

您的另一个问题还在于如何发送 ref，您将得到 'MutableRefObject'，

这是因为您没有向 React.useRef 提供值，因此该值确实可以是 HTMLDivElement 或 undefined，这就是错误所说的内容。

简单的解决方案只需将默认值设置为 null，TS 就会很高兴。这是有效的，因为 MutableRefObject，并且 null 实际上是一个有效的 React 组件，基本上就像一个 No op render。

例如。

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

这是一个有效的 TS 片段.. TS 游乐场