最終更新:2022-08-04 (木) 11:23:54 (4d)
React/関数コンポーネント
概要
- render メソッドだけを有して自分の state を持たないコンポーネントを、よりシンプルに書くための方法
- React.Componentを継承するクラスを定義する代わりに、props を入力として受け取り表示すべき内容を返す関数を定義
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
- propsを引数として受け取り、React要素を返す
例
const Example = (props) => { // You can use Hooks here! return <div />; }
function Example(props) { // You can use Hooks here! return <div />; }
- 分割代入で引数を受け取ることもできる
const Example = ({color, children}) => { // You can use Hooks here! return <div />; }