コンポーネント
Reactにおけるコンポーネントとは、関数であり、JSX（ReactElement）を返します。
import React from 'react';
type AppProps = {
message: string;
}
const App: React.FC<AppProps> = (props) => {
const {message} = props;
return <h1>{message}</h1>
}
export default App;
propsプロパティ
propsはコンポーネントに渡される引数です。
コンポーネントにデータを渡す際に利用されます。
以下の例はParentComponentからChildComponent呼び出し時にgreeting属性を指定し、propsから情報を取得しています。
サンプルコード:
const ParentComponent = () => {
return <ChildComponent greeting="Hello, World!" />;
}
const ChildComponent = (props) => {
const {greeting} = props;
return <h1>{greeting}</h1>;
}
コンポーネントの利用
コンポーネントを利用する場合、通常以下の流れとなります。
- コンポーネント関数を定義
- 定義したコンポーネントを
exportする - 親コンポーネントで定義したコンポーネントを
importし、利用する
コンポーネント関数の定義 & export
ChildComponent.tsx
import React from 'react';
type Props = {
greeting: string;
}
export const ChildComponent: React.FC<Props> = (props) => {
const {greeting} = props;
return <h1>{greeting}</h1>;
}
コンポーネントのimport & 呼び出し
App.tsx
import React from 'react';
import { ChildComponent } from './ChildComponent';
const App: React.FC = () => {
return <ChildComponent greeting="Hello from App Component" />;
}
export default App;
propsの情報を引数受け取り時に直接代入する
デストラクチャリングを使用して、関数コンポーネントの引数から直接propsを展開することができます。
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
}
コンポーネントの子要素を受け取る
React17までは、コンポーネントの子要素（children）がpropsプロパティに含まれておりました。
React 18以降では、children プロパティがpropsに暗黙的に含まれなくなったため、PropsWithChildrenを使用して子要素を扱うことを明示的に宣言する必要があります。
サンプルコード:
import React, { PropsWithChildren } from 'react';
type Props = {
title: string;
folded?: boolean;
};
const Summary: React.FC<Props & PropsWithChildren> = ({ title, folded = false, children }) => {
return (
<details open={!folded}>
<summary>{title}</summary>
{children}
</details>
);
};
export default Summary;
値がtrueの場合は記述を省略できる
JSXでは、属性の値がtrueである場合、その値を省略して記述することができます。
サンプルコード:
const MyComponent = () => {
return <input type="checkbox" checked />;
}
組み込みコンポーネント
ユーザ定義コンポーネントの命名規則
JSXでは、小文字で始まる名前のタグは組み込みコンポーネントとして解釈されます。
-
div,a
大文字で始まる名前のタグはユーザ定義コンポーネントとして解釈されるため、カスタムコンポーネントは必ず大文字で始める必要があります。
MyComponent
JSX、HTMLでの属性の違い
JSXでは、属性名がHTMLの標準的な書き方から変更されている場合があります。
キャメルケースの使用や、特定のHTML属性名がJavaScriptの予約語と競合するための変更が含まれます。
キャメルケースとして扱われる属性
JSXでは、HTML属性の多くがキャメルケースで書かれる必要があります。これはJavaScriptのプロパティアクセスの規則に従うためです。
例:
-
srcset->srtSet -
tabindex->tabIndex
サンプルコード:
<div tabIndex={0}>
{/* コンテンツ */}
</div>
属性名がHTMLと異なるもの
以下のHTML属性は、JavaScriptの予約語と競合しているため、JSXでは異なる名前で使用されます。
-
for->htmlFor -
class->className
<label htmlFor="myInput">Label</label>
<input id="myInput" className="inputClass" />
Booleanとして扱われる属性
JSXでは、以下の属性は明示的にtrueまたはfalseを指定しなくてもBooleanとして解釈されます。
disabledreadOnlyrequired
そのため、値がtrueの場合は、以下のように記載することができます。
<input disabled />
value + defaultValue属性
JavaScript でフォームを操作しやすいようにJSXでは、select, textareaタグにvalue, defaultValue属性を指定できます。
<textarea value={textareaValue} />
<select value={selectValue}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
value, defaultValueの使い分け
- デフォルト値を設定したい ->
defaultValue - デフォルト値を指定し、値をstateで管理したい ->
value
※ value属性で値を指定したのにstate管理を行わない場合、eslintでwarningが発生するので注意
key属性
JSXでは、繰り返し処理で要素をレンダリングする際にkey属性が必要です。
Reactの差分抽出エンジンが、DOMを一意に特定するためです。
key属性を指定していない以下のコードはwarningが発生します。
Missing "key" prop for element in iterator
const items = [{ id: 1, text: 'First item' }, { id: 2, text: 'Second item' }];
const ListComponent = () => {
return (
<ul>
{items.map(item => (
<li>{item.text}</li>
))}
</ul>
);
};
key属性を指定することでエラーが解消されます。
const items = [{ id: 1, text: 'First item' }, { id: 2, text: 'Second item' }];
const ListComponent = () => {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
};
[ ライブラリ] propTypes
propTypesはコンポーネントのpropsの型を検証するために使用され、型が合わない場合には開発中に警告を表示してくれるライブラリです。
import PropTypes from 'prop-types';
const Greeting = ({ name }) => {
return <h1>Hello, {name}</h1>;
}
Greeting.propTypes = {
name: PropTypes.string.isRequired
};
export default Greeting;
まとめ
以上です〜
個人用の備忘録用としてまとめておりますが、どなたかの役に立てたのなら幸いです。