JSX.Element 不可分配给 ForwardRefRenderFunction 类型的参数

Question

我正在尝试导出反应，但收到此 TS 错误，我无法解决。

这是该组件：

import React, {
  useEffect,
  MutableRefObject,
  forwardRef,
  RefObject
} from 'react';
import styled from 'styled-components';

export interface TextareaInputProps
  extends React.HTMLAttributes<HTMLTextAreaElement> {
  text?: string;
  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
  onApprove?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
}

export interface StyledTextareaInputProps {
  ref: MutableRefObject<HTMLTextAreaElement | null>;
}

const StyledTextArea = styled.textarea<StyledTextareaInputProps>`
  display: flex;
  align-items: stretch;
  resize: none;
  flex: 1;
  padding: ${({ theme }) => theme.padding.md}px;
  color: ${({ theme }) => theme.colors.grey700};
  line-height: ${({ theme }) => theme.lineHeights.nm};
  font-family: ${({ theme }) => theme.fontFamilies.regular};
  font-size: ${({ theme }) => theme.fontSizes.nm}px;
  font-weight: ${({ theme }) => theme.fontWeights.regular};
  text-overflow: ellipsis;
  border-style: none;
  border-color: transparent;
  overflow: auto;
`;

const TextareaInput = (
  { text, onChange, onBlur, onKeyDown, ...otherProps }: TextareaInputProps,
  ref: RefObject<HTMLTextAreaElement>
) => {
  useEffect(() => {
    if (ref && ref.current) {
      ref.current.focus();
    }
  }, [ref]);
  return (
    <StyledTextArea
      ref={ref}
      {...otherProps}
      onChange={onChange}
      value={text}
      onBlur={onBlur}
      onKeyDown={onKeyDown}
    />
  );
};

export default forwardRef(TextareaInput);

这是我收到的错误：

'({ text, onChange, onBlur, onKeyDown, ...otherProps }: TextareaInputProps, ref: React.RefObject) => JSX.Element' 类型的参数不可分配给 'ForwardRefRenderFunction<HTMLTextAreaElement, TextareaInputProps>' 类型的参数。参数“ref”和“ref”的类型不兼容。类型 'MutableRefObject<HTMLTextAreaElement | 空> | ((实例：HTMLTextAreaElement | null) => void) | null' 不可分配给类型'RefObject'。类型“null”不可分配给类型“RefObject”。

我还有其他具有类似模式的组件，它们都可以工作。

Answer 1

如果您阅读有关以下内容的 React 文档forwardRef：

\n

\n

仅当您使用 React.forwardRef 调用定义组件时，第二个 ref 参数才存在。常规函数或类组件不会接收 ref 参数，并且 ref 在 props 中也不可用。

\n

\n

你需要做这样的事情：

\n

const TextareaInput = (\n  { text, onChange, onBlur, onKeyDown, ...otherProps }: TextareaInputProps,\n  ref: RefObject<HTMLTextAreaElement>\n) => {\n  useEffect(() => {\n    if (ref && ref.current) {\n      ref.current.focus();\n    }\n  }, [ref]);\n  return (\n    <StyledTextArea\n      ref={ref}\n      {...otherProps}\n      onChange={onChange}\n      value={text}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n    />\n  );\n};\n

\n

首先创建参考：

\n

const ref = React.createRef();\n

\n

第二遍参考使用forwardRef：

\n

const ModifiedTextareaInput = React.forwardRef((props, ref) => <TextareaInput {...props} ref={ref}/>);\nexport default ModifiedTextareaInput;\n

\n

注意：我没有为它们添加类型定义。假设你可以添加那些

\n