3
votes

création de noms de composants dynamiques en réaction avec typescript 3.2.2

J'ai mis à jour vers typescript 3.2.2 et ce code qui servait à compiler ne se compile plus:

export const Heading: React.SFC<HeadingProps> = ({ level, className, tabIndex, children, ...rest }) => {
  const Tag = `h${level}`;

  return (
    <Tag className={cs(className)} {...rest} tabIndex={tabIndex}>
      {children}
    </Tag>
  );
};

Avec l'erreur:

La propriété 'tabIndex' n'existe pas sur le type 'IntrinsicAttributes'.

reactjs typescript

0 commentaires

3 Réponses :

0
votes

Je n'utilise pas React.SFC. J'ai utilisé le composant React comme:

import Level from './component/level';
interface HeadingProps {
    className: string,
    tabIndex: any,
}

export default class Heading extends React.Component<HeadingProps, {}>{
render(){
 const {className, tabIndex}
 return (
        <Level className={cs(className)} {...this.props.rest} tabIndex= 
          {tabIndex}>
          {this.props.children}
        </Level>
      );
    };
}


interface Props {
    tabIndex: any,
}

export default class Level extends React.Component<Props, {}> {
render(){
   return (
            <h1 tabIndex={tabIndex}>
              {this.props.text}
            </h1>
        )
   }
}

peut-être que vous utiliserez le code ci-dessous, je pense que vous trouverez la solution:

interface HeadingProps {
    tabIndex: any,
}

    export const Heading: React.SFC<HeadingProps> = ({ level, className, tabIndex, children, ...rest }) => {
      const Tag = `h${level}`;

      return (
        <Tag className={cs(className)} {...rest} tabIndex={tabIndex}>
          {children}
        </Tag>`enter code here`
      );
    };

et doivent également définir le tabIndex dans la classe de niveau.

mon code:

export default class Heading extends React.Component<Props, {}>

0 commentaires

1
votes

C'est un peu verbeux, mais j'ai pu tout faire compiler proprement avec un typage complet en le faisant de cette façon:

const H = (
  props: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >
): JSX.Element => React.createElement("h" + this.props.size, props);

Ensuite, vous pouvez utiliser dans votre composant et utilisez la propriété size pour dicter la balise d'en-tête à utiliser.

0 commentaires

5
votes

C'est un peu tard et testé sur TypeScript 3.4:

Remplacez

const Tag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

par

const Tag = `h${level}`;

I Je ne suis toujours pas sûr de tabIndex , mais maintenant TypeScript peut déduire d'autres propriétés comme children.

0 commentaires