reactjs - JSX.Element ไม่สามารถกำหนดค่าให้กับพารามิเตอร์ชนิด ForwardRefRenderFunction ได้

ฉันพยายามส่งออก React แต่เจอข้อผิดพลาด 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 | null> | ((instance: HTMLTextAreaElement | null) => void) | null'' ไม่สามารถกำหนดค่าให้กับชนิด ''RefObject'' ได้ ชนิด ''null'' ไม่สามารถกำหนดค่าให้กับชนิด ''RefObject''.

ฉันมีส่วนประกอบอื่น ๆ ที่มีรูปแบบคล้ายกันซึ่งทั้งหมดทำงานได้

คำตอบ #1

ตามที่ข้อผิดพลาดบอก ให้เปลี่ยนคอมโพเนนต์ TextareaInput ของคุณเป็น ForwardRefRenderFunction โดยรวมถึงประเภทที่ถูกต้อง ลบประเภทออกจากพารามิเตอร์ (สิ่งนี้สำคัญเพราะคุณจะได้ข้อผิดพลาดอีกข้อหากไม่ทำ)

ฟังก์ชันที่อัปเดตของคุณจะมีลักษณะดังนี้ ทุกอย่างอื่นยังคงเหมือนเดิม:

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

คำตอบ #2

ถ้าคุณอ่านเอกสารของ React เกี่ยวกับ 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;

หมายเหตุ: ฉันยังไม่ได้เพิ่มการกำหนดประเภทสำหรับสิ่งเหล่านั้น สมมติว่าคุณสามารถเพิ่มสิ่งเหล่านั้นได้