為什么 ForwardRef 在使用 pair 標簽時會導致錯誤

Question

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

我的索引.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<HTMLDivElement | 未定義>; }' 不可分配給類型 'IntrinsicAttributes & RefAttributes'。
類型“IntrinsicAttributes & RefAttributes”上不存在屬性“children”.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/>表示沒有孩子。 <Tag></Tag>表示帶孩子。

所以你的錯誤基本上是告訴你你試圖送孩子，但你的<Menu/>組件沒有說它需要任何東西。

解決方案react.forwardRef需要兩個通用的 arguments，第一個是你將轉發 ref 的 DOM 元素的類型，第二個是它需要的道具。

因此，使用此信息，我們應該能夠通過執行 -> 來轉換您的示例

import React from "react"

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

您還會注意到我還刪除了any上的 ref，現在可以正確輸入了。

您的另一個問題還在於您如何發送ref ，您將獲得'MutableRefObject<HTMLDivElement | undefined>' 'MutableRefObject<HTMLDivElement | undefined>' ,

這是因為您沒有為React.useRef提供值，所以該值確實可以是 HTMLDivElement 或未定義，這就是錯誤所說的。

簡單的解決方案只需將默認設置為 null，TS 就會很高興。 這是有效的，因為MutableRefObject<T | null> MutableRefObject<T | null>和 null 實際上是一個有效的 React 組件，基本上就像一個無操作渲染。

例如。

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

這是一個有效的 TS 片段.. TS Playground