在 React/Typescript 中環繞 function 時出現 React.forwardRef 類型錯誤

Question

我正在嘗試使用 React.forwardRef()，因為如果我不嘗試使用它，我會在控制台中收到以下錯誤：“無法為函數組件提供 refs。嘗試訪問此 ref 將失敗。你的意思是使用 React.forwardRef()?"

問題是我收到一個類型錯誤，當我嘗試將 handleDropdownClick 包裝在顯示以下錯誤的 React.forwardRef() 中時，我不確定如何解決：

我使用 styled-components 創建了一個選項下拉列表。 我將 ref 傳遞到“Dropdown”中，它只是一個帶有一些樣式的頂部包裝 div。

對於某些上下文，handleDropdownClick function 負責使用我稱為節點的 ref 打開和關閉下拉列表。 我只是不確定如何正確地將正確的類型傳遞給 React.forwardRef，我認為這就是它的抱怨所在。

  const node = useRef<HTMLDivElement>(null!)

  const handleDropdownClick = React.forwardRef((event: MouseEvent, ref) => {
        if (node.current.contains(event.target as Node)) return

        setdropdownOpen(false)
    })

    return (
        <>
            <Dropdown ref={node}>
                <DropdownBtn
                    disabled={disabled}
                    hasError={hasError}
                    onClick={() => setdropdownOpen(!dropdownOpen)}
                >
                    {typeSelection}
                    <ListIcon hasError={hasError} name="chevron" />
                </DropdownBtn>
                {dropdownOpen && (
                    <DropdownContent hasError={hasError}>
                        {options.map((item: any) => {
                            const isObject = typeof item.value === 'object'

                            const value = isObject
                                ? item.value['fr-FR']
                                : item.value

                            return (
                                <DropdownItem
                                    typeSelection={typeSelection === value}
                                    onClick={() => handleItemClick(item)}
                                    key={item.index}
                                >
                                    {value}
                                </DropdownItem>
                            )
                        })}
                    </DropdownContent>
                )}
            </Dropdown>
        </>
    )

Answer 1

TypeScript 錯誤消息提到無效，因為您的 handleDropdownClick function 沒有返回任何值。 ForwardRefRenderFunction 具有與 FunctionComponent 相同的返回類型——它必須返回 JSX.Element 或 null。

關於何時何地使用 forwardRef，這里存在一個根本性的誤解。 它用於包裝組件，而不是事件處理程序。

您的 handleDropdownClick 應該是一個簡單的 function，它更新 dropdownOpen 的 state，僅此而已。 不需要轉發任何 ref，因為整個組件已經可以訪問節點 ref 變量。