时间戳

首页 > 解决方案 > 在 React/Typescript 中包裹函数时出现 React.forwardRef 类型错误

reactjs - 在 React/Typescript 中包裹函数时出现 React.forwardRef 类型错误

问题描述

我正在尝试使用 React.forwardRef()，因为如果我不尝试使用它，我会在控制台中收到以下错误：“无法为函数组件提供 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef()？”

问题是我收到一个类型错误，当我尝试将 handleDropdownClick 包装在 React.forwardRef() 中时，我不确定如何解决它，它显示以下错误：

在此处输入图像描述

我使用样式组件创建了一个选项下拉列表。我将 ref 传递到“Dropdown”中，它只是一个顶部包装 div，带有一些样式。

对于某些上下文，handleDropdownClick 函数负责使用我称为节点的 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>
        </>
    )

标签： reactjs

解决方案

TypeScript 错误消息提到 void 因为您的 handleDropdownClick 函数不返回任何值。ForwardRefRenderFunction 与 FunctionComponent 具有相同的返回类型——它必须返回 JSX.Element 或 null。

关于何时何地使用 forwardRef 存在根本性的误解。它用于包装组件，而不是事件处理程序。

您的 handleDropdownClick 应该是一个简单的函数，它更新 dropdownOpen 的状态，仅此而已。不需要转发任何 ref，因为整个组件已经可以访问节点 ref 变量。

推荐阅读