【TypeScript+React ③】React Hooksにおけるpropsについて

React Hooks Props型

Reactでは、親のコンポーネントから子のコンポーネントへ値を受け渡すことが可能です。
この流れを「propsを渡す」と言ったりします。
あくまで親から子への一方通行になりますので、子から親へは値を渡すことは出来ません。

1）「App.tsx」の関数をアロー関数に書き換える

function App() {
　　　　return (
　　　　　　　　<div className="App">
　　　　　　　　　　　　<header className="App-header">
　　　　　　　　　　　　</header>
　　　　　　　　</div>
　　　　);
}
　　　　　↓
const App:React.FC=()=> {
　　　　return (
　　　　　　　　<div className="App">
　　　　　　　　　　　　<header className="App-header">
　　　　　　　　　　　　</header>
　　　　　　　　</div>
　　　　);
}

FC（ React. FC）とは、constによる型定義でコンポーネントを定義できる型です。
コンポーネントというのはReact独自のタグで、オリジナルのタグを作成し、
タグの中で他のタグをまとめて定義できるものです。
constで定義したタグはそのまま他のコンポーネントで呼び出して使う事ができます。

2）「src」の直下に「TestComponent.tsx」でコンポーネント作成し、「rafce」と入力して、ひな形を表示させる

3）コンポーネントの内容を変更する

import React from 'react'

interface Props{
　　　　text:string; //関数Propsの属性[text]をstring型で定義
}

const TestComponent:React.FC<Props> = (props) => {
　　　　return (
　　　　　　　　<div>
　　　　　　　　　　　　<h1>{props.text}</h1>
　　　　　　　　</div>
　　　　)
};

export default TestComponent ;

4）「App.tsx」に戻って、[header]の中に、作成した「TestComponent」を入れ込む

<header className="App-header">
　　　　<TestComponent/>
</header>

入れ込むと、TestComponentをインポートするコードが自動で生成される

import TestComponent from './testComponent';

↓（App.tsx）

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Data from './data.json';
import TestComponent from './testComponent';

const App:React.FC=()=> {
　　　　return (
　　　　　　　　<div className="App">
　　　　　　　　　　　　<header className="App-header">
　　　　　　　　　　　　　　　　<TestComponent/>
　　　　　　　　　　　　</header>
　　　　　　　　</div>
　　　　);
}；

5）<TestComponent/>にエラーが出ているので、TestComponentの属性「text」に値を渡して、 TestComponentを呼び出す。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Data from './data.json';
import TestComponent from './testComponent';

const App:React.FC=()=> {
　　　　return (
　　　　　　　　<div className="App">
　　　　　　　　　　　　<header className="App-header">
　　　　　　　　　　　　　　　　<TestComponent text ="hello APP"/>
　　　　　　　　　　　　</header>
　　　　　　　　</div>
　　　　);
}

export default App;