web-dev-qa-db-fra.com

Comment corriger l'élément de liaison 'enfants' a implicitement un type 'any' .ts (7031)?

Je manque quelque chose ici avec la validation comment ajouter la validation des types? L'erreur "élément 'children' a implicitement un type 'any'".

import * as React from 'react';
import Button from './Styles';

const Button1 = ({ children, ...props }) => (
  <Button {...props}>{children}</Button>
);

Button1.propTypes = {};

export default Button1;
reactjstypescript
10
Zahid Karim

Oui, il manque un type pour Props dans son ensemble, ce qui signifie que TypeScript le voit comme any et vos règles ts ne le permettent pas.

Vous devez taper vos accessoires comme:

interface IProps {
    children: ReactNode;
    // any other props that come into the component
}

const Button1 = ({ children, ...props }: IProps) => (
    <Button {...props}>{children}</Button>
);
18
Lukáš Gibo Vaic

Vous pouvez également ajouter le type prédéfini à vos composants fonctionnels comme ceci:

const Button1: React.FC<{}>  = ({ children }) => (
    <Button>{children}</Button>
);

De cette façon, vous n'avez pas à vous répéter pour définir les accessoires children.

La version plus complète pourrait ressembler à ceci:

interface Props {
// any other props that come into the component, you don't have to explicitly define children.
}

const Button: React.FC<Props> = ({ children, ...props }) => {
  return (
      <Button {...props}>{children}</Button>
  );
};

Veuillez noter que cela fonctionne pour React 16.8

3
Hung Ton