Type de composant générique sans état? OU Extension de l'interface de fonction générique en tapuscrit pour avoir un autre générique?

Question

Problème: l'interface de L' Stateless Functional Component est donné comme

interface SFC<P = {}> {
    (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
    propTypes?: ValidationMap<P>;
}

L'hélice type de mon composant est aussi générique que:

interface Prop<V>{
    num: V;
}

Comment bien définir mes composants? comme:

const myCom: <T>SFC<Prop<T>> = <T>(props: Prop<T>)=> <div>test</div>

donne une erreur lors de l' character 27 que Cannot find name 'T'

Ici est :Tapuscrit de l'aire de Jeux du modifiés exemple

MyFindings:

1:Tapuscrit 2.9.1 soutien Dynamique Composant Générique: http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements

class myCom<T> extends React.Component<Prop<T>, any> {
   render() {
      return <div>test</div>;
   }
}

2: Extension de l' SFC de faire une nouvelle interface comme mentionné dans la réponse suivante serait de faire du composant prop type any: Tapuscrit Réagir apatrides de la fonction avec le paramètre générique/types de retour que je ne veux pas. Je veux donner le bon type pour mon prop

Answer 1

Vous ne pouvez pas utiliser des génériques comme ceci:

const myCom: <T>SFC<Prop<T>> = <T>(props: Prop<T>)=> <div>test</div>

Le Tapuscrit spec états:

Une construction de la forme

< T > ( ... ) => { ... }

pourrait être analysée comme une flèche expression de fonction avec un paramètre de type ou d'un type d'assertion appliquée à une flèche fonction sans paramètre de type.

source: Microsoft/fichier d'enregistrement spec.md

Votre déclaration ne correspondent pas au modèle défini dans le fichier d'enregistrement spec, donc il l'habitude de travailler.

Vous pouvez toutefois de ne pas utiliser le SFC de l'interface et de simplement déclarer vous-même.

interface Prop<V> {
    num: V;
}

// normal function
function Abc<T extends string | number>(props: Prop<T>): React.ReactElement<Prop<T>> {
    return <div />;
}

// const lambda function
const Abc: <T extends string | number>(p: Prop<T>) => React.ReactElement<Prop<T>> = (props) => {
   return <div />
};

export default function App() {
    return (
        <React.Fragment>
            <Abc<number> num={1} />
            <Abc<string> num="abc" />
            <Abc<string> num={1} /> // string expected but was number
        </React.Fragment>
    );
}

Answer 2

Il existe un modèle pour atténuer ce problème en déclarant un alias de type de composant générique en dehors du composant, puis en l'affirmant simplement lorsque vous en avez besoin.

Pas aussi joli, mais toujours réutilisable et strict.

 interface IMyComponentProps<T> {
  name: string
  type: T
}

// instead of inline with component assignment
type MyComponentI<T = any> = React.FC<IMyComponentProps<T>>

const MyComponent: MyComponentI = props => <p {...props}>Hello</p>

const TypedComponent = MyComponent as MyComponentI<number>
 

Answer 3

Modèle d'usine:

 import React, { SFC } from 'react';

export interface GridProps<T = unknown> {
  data: T[];
  renderItem: (props: { item: T }) => React.ReactChild;
}

export const GridFactory = <T extends any>(): SFC<GridProps<T>> => () => {
  return (
    <div>
      ...
    </div>
  );
};

const Grid = GridFactory<string>();
 

Answer 4

Je propose une solution similaire mais légèrement différente (brainstorming avec un ami). Nous essayions de créer un wrapper Formik et avons réussi à le faire fonctionner de la manière suivante:

 import React, { memo } from 'react';

export type FormDefaultProps<T> = {
  initialValues: T;
  onSubmit<T>(values: T, actions: FormikActions<T>): void;
  validationSchema?: object;
};

// We extract React.PropsWithChildren from React.FunctionComponent or React.FC
function component<T>(props: React.PropsWithChildren<FormDefaultProps<T>>) {
  // Do whatever you want with the props.
  return(<div>{props.children}</div>
}

// the casting here is key. You can use as typeof component to 
// create the typing automatically with the generic included..
export const FormDefault = memo(component) as typeof component;

 

Et puis, vous l'utilisez comme:

  <FormDefault<PlanningCreateValues>
        onSubmit={handleSubmit}
        initialValues={PlanningCreateDefaultValues}
      >
         {/*Or any other child content in here */}
        {pages[page]}
</FormDefault>
 

Je n'ai pas pu y parvenir avec des expressions de méthode:

const a: React.FC<MyProp> = (prop) => (<>MyComponent</>);

Answer 5

Tu as ceci:

 interface Prop<V> {
    num: V;
}
 

Et vous avez votre composant défini comme ceci:

 const myCom: SFC<Prop<T>> = <T>(props: Prop<T>)=> <div>test</div>
 

Cela ne fonctionnerait pas car vous auriez besoin de fournir un type concret pour le V dans l'interface puisque vous l'implémentez dans votre composant.

Cela ressemble à ceci:

 const myCom: SFC<Prop<object>> = <T>(props: Prop<T>)=> <div>test</div>
 

Notez mon utilisation de object là où vous aviez T . C'est juste un exemple.