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 ”。参数“ ref”和“ ref”的类型不兼容。类型'MutableRefObject | （（实例：HTMLTextAreaElement | null）=> void）| “ null”不可分配给“ RefObject”类型。不能将类型“ null”分配给类型“ RefObject”。

我还有其他具有相似模式的组件都可以工作。

Answer 1

如果您阅读有关forwardRef的React文档：

仅当您使用React.forwardRef调用定义组件时，第二个ref参数才存在。 常规函数或类组件不接收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;

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

JSX.Element无法分配给ForwardRefRenderFunction类型的参数

1 个答案: