Question

我正在尝试在forwardRef中使用defaultProps。当我使用不带forwardRef的MessageBox时，它与defaultProps配合良好。但是，当我将其与forwardRef一起使用时，会发生错误。该怎么解决？

打字稿：3.4.5 “ react”：“ ^ 16.8.6”，

import React, { forwardRef } from "react";

export interface MessageBoxProps {
  test: string;
  children: any;
}

const defaultProps: Partial<MessageBoxProps> = {
  test: "test"
};

const MessageBox = forwardRef<HTMLDivElement, MessageBoxProps>((props, ref) => {
  return <p>{props.test}</p>;
});

MessageBox.defaultProps = defaultProps;

export default MessageBox;

export default function App() {
  const ref = React.useRef<HTMLDivElement>(null);
  return (
    <div className="App">
      <Test ref={ref} />
    </div>
  );
}

Type '{ ref: RefObject<HTMLDivElement>; }' is missing the following properties from type 'MessageBoxProps': test, children

https://codesandbox.io/s/forwardref-with-typescript-knhu3?file=/src/App.tsx:83-244

Answer 1

试试：

export interface MessageBoxProps extends React.AllHTMLAttributes<HTMLDivElement>
{
    test?: string;
}

它对我有用。现在您还可以设置 children、href、onClick 和其他属性。

这是分叉的沙箱链接：https://codesandbox.io/s/forwardref-with-typescript-forked-sn0u3?file=/src/App.tsx

TypeScript中带有defaultProps的forwardRef

1 个答案: