Méthodes de saisie valides : guide des contrôles de rendu conditionnel

Question

J'essaie d'entrer dans le rendu conditionnel, mais cela me donne l'erreur : L'élément a implicitement un type 'any' car l'expression de type 'number' ne peut pas être utilisée pour indexer les 'types' . Aucune signature d'index avec un paramètre de type 'number' n'a été trouvée sur le type 'types'. Le rendu est valide lorsque tout est "any".

types d'interface {
  '0' : JSX.Element ;
  '1' : JSX.Element ;
  '2' : JSX.Element ;
}

fonction d'exportation par défaut Économie (accessoires : any) {
  const [étape, setStep] = useState(0)

  const rendu = () =>
    composant const : types = {
      '0' : ,
      '1' : ,
      '2' : ,
    }
    composant de retour[étape]
  }
retour (
   {rendre()}
)
Quelqu'un peut-il m'aider à comprendre comment ajouter des types pour ce rendu conditionnel ? 
Je dois comprendre comment ajouter des types pour ce rendu conditionnel
            

Answer 1

Lors de l'indexation d'un objet, vous devez utiliser l'opérateur keyof. Extrait de la documentation TypeScript :

interface types {
  '0': JSX.Element;
  '1': JSX.Element;
  '2': JSX.Element;
}

export default function Economy(props: any) {
  const [step, setStep] = useState<keyof types>("0")

  const render = () => {
    const component: types = {
      '0': <Home />,
      '1': <Create />,
      '2': <Detail />,
    }
    return component[step]
  }
return (
   {render()}
)

Answer 2

Votrestep具有number类型，不能用于索引types，因为types只有1,2,3。所以您可以手动将step设置为keyof types :

const [step, setStep] = useState<keyof types>(0)

Puisque step est un numéro, vous avez également besoin de la clé :

interface types {
  0: JSX.Element;
  1: JSX.Element;
  2: JSX.Element;
}
 const component: types = {
      0: <Home />,
      1: <Create />,
      2: <Detail />,
    }
 return component[step] // 没有错误