错误：组件定义缺少显示名称 react/display-name with React.forwardRef

Question

我定义了一个如下所示的复选框：

export const IndeterminateCheckbox = forwardRef(
    ({ indeterminate, ...rest }, ref) => {
      const defaultRef = useRef()
      const resolvedRef = ref || defaultRef
  
      useEffect(() => {
        resolvedRef.current.indeterminate = indeterminate
      }, [resolvedRef, indeterminate])
  
      return (<input type="checkbox" ref={resolvedRef} {...rest} />);
    }
);

为此，我遇到了以上 lint 错误。 我搜索了多个地方，但找不到如何更好地定义IndeterminateCheckbox来避免该错误。

Answer 1

除了禁用react/display-name lint 规则（全局或专门针对此行），您可以简单地将命名的 function（而不是匿名的）传递给forwardRef调用。

export const IndeterminateCheckbox = forwardRef(
    function Checkbox({ indeterminate, ...rest }, ref) {
        const defaultRef = useRef()
        const resolvedRef = ref || defaultRef
  
        useEffect(() => {
            resolvedRef.current.indeterminate = indeterminate
        }, [resolvedRef, indeterminate])
  
        return (<input type="checkbox" ref={resolvedRef} {...rest} />);
    }
);