2022年4月22日 りあクト！ 第5章 JSXとコンポーネントの関係（p.35~)
JSXの基本構文
JSX構文
<MyComponent foo="bar">baz</MyComponent>
コンパイルされると 以下のReact.createElementの形式に変換されます。
React.createElement(component, props, ...children)
React.createElement(MyComponent, { foo: 'bar' }, 'baz');
React.createElementの実行結果が以下の形式になります。
{ type: 'MyComponent', props: { foo: 'bar', children: 'baz' }, key: null, ref: null, }
children
React.createElement()の第3引数に相当するものです。 JSX においては属性値ではなく子要素として記述され、呼び出された側のコンポーネントでは暗黙のpropsとして渡されます。
Props
/src/App.tsx
import React from 'react';
import Greets from './components/Greets';
.
.
.
const App: React.FunctionComponent = () => (
<div className="App">
<Greets name="Patty" times={4}>
"yano"
</Greets>
</div>
);
export default App;
Greetsタグに注目してください。
- Propsとしてname="Patty" times={4} Props内のchildrenとして"yano"が渡されます。
- childrenは暗黙的に渡されます。
/src/components/Greets.tsx
import React from 'react';
type Props = { name: string; times?: number };
const Greets: React.FunctionComponent<Props> = (props) => {
const { name, times = 1, children } = props;
return (
<>
{[...Array(times)].map((_) => (
<p>Hello, {name}! {children}</p>
))}
</>
);
};
export default Greets;
- 受け取ったPropsを分割代入しています。
- childrenは引数として渡すときは暗黙的に渡しますが、受け取るときは明示的にchilderenとして分割代入される形で受け取る事で値が扱えます。
- timesだけデフォルト値の1が設定されています。
- [...Array(4)]はconsole.log([...Array(4)]);で出力すると
[ undefined, undefined, undefined, undefined ]となりmapメソッドで繰り返し処理を行う回数を指定しています。
通常のPropsの渡し方
times={4}のように{}による式埋め込みで値を渡します。- 文字列の場合は
name="patty"のようにクォーテーションで囲む形式によって渡すこともできます。
HTMLエスケープされた文字列をPropsとして渡した場合
- コンポーネント側で復元されます。
子要素として文字列を記述するときの挙動
- 行の先頭と末尾の空白文字と空白行が削除されます。
- 改行は空白文字に置き換えられます。
propsとしてtrueを渡す場合
propsとしてBoolean値のtrueを渡す場合、値の記述を省略できます。
省略前
<MyButton color="blue" disable={true} />
省略後
<MyButton color="blue" disable />
