reactjs - Kuinka korjata Binding-elementti 'children' sisältää oletusarvoisesti 'any'-tyypin.ts(7031)?

Jotenkin puuttuu jotain tässä validoinnissa, miten lisään tyypin validoinnin? Saan virheen "elementti 'children' on implisiittisesti tyypiltään 'any'".

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

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

Button1.propTypes = {};

export default Button1;

Vastaus #1

Muokattu 2022: react 18:n kanssa FC ei enää tarjoa lapsia, joten sinun täytyy määritellä se itse, ja voit jättää FC:n pois:

import React, { ReactNode } from "react";

interface Props {
    children?: ReactNode
    // any props that come into the component
}

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

Kyllä, sinulta puuttuu tyyppi Propsille kokonaisuudessaan, mikä tarkoittaa, että TypeScript näkee sen any:na ja ts-sääntösi eivät salli sitä.

Sinun täytyy kirjoittaa propsisi muodossa:

import React, { FC } from "react";

interface Props {
    // any props that come into the component
}

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

Vastaus #2

Tämä oli minulle suuri ongelma ja tuhlasin paljon aikaa oikean ratkaisun selvittämiseen. Tällä hetkellä sinulla on virhe children-propin kanssa, mutta tulevaisuudessa saatat kohdata tämän virheen monissa funktioissa, joissa purat parametreja. Joten ehdottaisin, että seuraat tätä GitHub-asiaa.

const yourfunc = ({destructuredProps}: {destructuredProps: type}) => {}

Vastaus #3

Voit myös lisätä ennalta määritellyn tyypin funktionaalisiin komponentteihisi näin:

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

Tällä tavalla sinun ei tarvitse toistaa itseäsi määritellessäsi children-propsia.

Täydellisempi versio voisi olla tällainen:

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>
  );
};

Huomaa, että se toimii React 16.8 kanssa

Vastaus #4

Toisena lähestymistapana voit käyttää sisäänrakennettua geneeristä tyyppiä "React.PropsWithChildren" lapsille propseissa, käsitellen nämä propsit asianmukaisesti. Hyvin lyhyt koodi näyttäisi tältä:

import React from "react";
import Button from "./Styles";

type MyComponentProps = React.PropsWithChildren<{}>;

export default function MyComponent({ children, ...other}: MyComponentProps) {
  return <Button {...other}>{children}</Button>;
}

Vastaus #5

Se tarvitsee 'any', joten anna sille!

const Button1 = ({ children, ...props } : any)

Käsittele se sitten funktiossa, jos haluat säilyttää tyypin

Vastaus #6

Voit käyttää myös tyyppejä

type ButtonProps = {
    children: ReactNode;
    
}

const Button = ({ children }: ButtonProps) => (
    <button>{children}</button>
);