【React】オブジェクトを子コンポーネントに渡すときのTypeScriptの型を指定する

5236 ワード
テキストリンク

概要

Reactで子コンポーネントにデータを渡す時にオブジェクトの場合は子コンポーネントで型を指定する場合はその構造も再現しないといけないらしい。

コード

親コンポーネント

例えば、親コンポーネントで下記のようなresultsはsetResultsで複数の値を持つプロパティ。
このプロパティの型はResultsStateTypeと指定しています。
そしてresultsプロパティはResultsという子コンポーネントに渡しています。

App
type ResultsStateType = {
  country: string;
  cityName: string;
};
function App() {
const [results, setResults] = useState<ResultsStateType>({
    country: "",
    cityName: ""
  });
}

return (
    <div className="App">
      <Results results={results} />
    </div>
  );

子コンポーネントでの型指定

親コンポーネントから受け取ったプロパティは子コンポーネントでも型を指定しますが、親とは少し型を指定する方法が違う。

親コンポーネントから受け取ったプロパティはreslutsという名前で受け取ってしますので、同じ構造にしてあげる必要があるようです。

Resutls
type ResultsPropsType = {
    results:{
        country: string;
        cityName: string;
    }
  };
  
  const Results=(props:ResultsPropsType)=>{
    return(
        <h1>子コンポーネント</h1>
    )
}

export default Results
Codejam2022 Round1B: Controlled Inflation
Zennの記事作成方法