javascript - React typescript forwardref med defaultProps

Jeg prøvde å bruke defaultProps i en funksjonell komponent sammen med forwardRef, men fikk feilen (se skjermbilde).

Jeg vil ikke desstrukturere props i funksjonsparametere og tildele standardverdi, fordi jeg har mange props i mitt opprinnelige brukstilfelle. Jeg prøvde også å tildele standardverdiene direkte i JSON til ComponentA.defaultProps, men fikk samme resultat.

Hvordan løse dette? Prøvde å surfe, men klarte ikke å finne noen løsning. Også siden vi bruker TS for typekontroll, trenger vi fortsatt prototype JSON? #App.tsx

import './App.css';
import ComponentA from './components/A/A';
function App() {
  return (
    <div className="App">
      <ComponentA>
        <button>Button I am</button>
      </ComponentA>
    </div>
  );
}

export default App;

#ComponentA.tsx

import React,{forwardRef} from "react"
import PropTypes from 'prop-types';

type Props =  {
    children:JSX.Element | JSX.Element[],
    text:string,
    text1?:string,
} 

const ComponentA=(prop:Props)=>{
    return <div>Hey
        {prop.children}
        {prop.text}
        {prop.text1}
    </div>
}
ComponentA.prototype = {
    children:PropTypes.element.isRequired,
    text:PropTypes.string.isRequired,
    text1:PropTypes.string
}

ComponentA.defaultProps={
    text: 'done'
} as Partial<Props>
export default forwardRef<HTMLAllCollection,Props>(ComponentA)

Takk

Svar #1

Brian Vaughn kommenterte på problemet med Stateless Component: React.forwardRef gjør defaultProps ugyldig

Funksjonen som sendes til forwardRef er ikke en React-komponent. (React-komponenter godtar for eksempel ikke en andre ref-parameter.) Det er bare en funksjon som «renderer» (returnerer) React-elementer. Den støtter derfor ikke defaultProps. Vi har tester som bekrefter dette som forventet oppførsel.

React logger også følgende feil i konsollen (som kan sees i ditt Code Sandbox-reproduksjon):

Advarsel: forwardRef-renderfunksjoner støtter ikke propTypes eller >defaultProps. Har du ved et uhell sendt inn en React-komponent?

Det er grunnen til at du ikke kan legge ved defaultProps før du sender funksjonen som "rendrer" til forwardRef.

Det nevnes også i typedefinisjonene til React:

// the input of ForwardedRef
interface ForwardRefRenderFunction<T, P = {}> {
    (props: P, ref: ForwardedRef<T>): ReactElement | null;
    displayName?: string | undefined;
    // explicit rejected with `never` required due to
    // https://github.com/microsoft/TypeScript/issues/36826
    /**
     * defaultProps are not supported on render functions
     */
    defaultProps?: never | undefined;
    /**
     * propTypes are not supported on render functions
     */
    propTypes?: never | undefined;
}

I ditt tilfelle bare bytt om på rekkefølgen av deklarasjonene:

import "./styles.css";
import { forwardRef } from "react";
import PropTypes from "prop-types";

type Props = {
  children: JSX.Element | JSX.Element[];
  // NOTE: text is optional since he has default value.
  text?: string;
  text1?: string;
};

const ComponentA = forwardRef<HTMLAllCollection, Props>((prop: Props) => {
  return (
    <div>
      Hey
      {prop.children}
      {prop.text}
      {prop.text1}
    </div>
  );
});

ComponentA.prototype = {
  children: PropTypes.element.isRequired,
  text: PropTypes.string,
  text1: PropTypes.string
};

ComponentA.defaultProps = {
  text: "done"
};

export default function App() {
  return (
    <ComponentA>
      <button>Button I am</button>
    </ComponentA>
  );
}

Sandkassekode

Relaterte artikler