时间戳

首页 > 解决方案 > JSX.Element 不可分配给 ForwardRefRenderFunction 类型的参数

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

问题描述

我正在尝试导出一个反应，但得到这个我无法解决的 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”。

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

标签： reactjstypescriptstyled-components

解决方案

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

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

你需要做这样的事情：

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}
    />
  );
};

首先创建参考：

const ref = React.createRef();

第二遍参考使用forwardRef：

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

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

推荐阅读