有効な入力メソッド: 条件付きレンダリング コントロールのガイド

Question

条件付きレンダリングに入ろうとしていますが、次のエラーが表示されます: タイプ 'number' の式はタイプ 'types' のインデックスに使用できないため、要素には暗黙的に 'any' 型が含まれています.タイプ 'number' のパラメータを持つインデックス署名がタイプ 'types' で見つかりませんでした。 すべてが「any」の場合、レンダリングは有効です。

インターフェイス タイプ {
  '0': JSX.要素;
  '1': JSX.要素;
  '2': JSX.要素;
}

デフォルト関数のエクスポート Economy(props: any) {
  const [ステップ、setStep] = useState(0)

  const render = () => {
    const コンポーネント: タイプ = {
      '0': <ホーム />,
      '1': <作成 />,
      '2': <詳細 />,
    }
    コンポーネントを返す[ステップ]
  }
戻る （
   {与える（）}
)

この条件付きレンダリングのタイプを追加する方法を理解できる人はいますか?

この条件付きレンダリングのタイプを追加する方法を理解する必要があります

Answer 1

オブジェクトにインデックスを付けるときは、keyof 演算子を使用する必要があります。 TypeScript ドキュメントから:

リーリー

Answer 2

あなたの step にはタイプ number があり、types には 1,2 しかないため、types のインデックス付けには使用できません。 3。したがって、step を keyof Types:

に手動で設定できます。 リーリー

step は数値であるため、次のキーも必要です:

リーリー