React コンポーネント化

Reactのコンポーネント化と使用方法

コンポーネント名の先頭は必ず大文字で始める
コンポーネントに値を渡すには、propsか引数で渡す必要がある

props

App.jsに、InputTodo.jsxコンポーネントを配置する。
コンポーネントに値を渡すにはprops(プロパティの意らしい)を使用する

App.js

import React, { useState } from "react";
//コンポーネントのインポート
import { InputTodo } from "./components/InputTodo";

// 名前付きexport
export const App = () => {
  //Hooks 
  const [todoText, setTodoText] = useState("");

  //インプットエリアに入力した際、入力をtodoTextで受け取る
  const onChangeTodoText = (event) => {
    setTodoText(event.target.value);
  };

  const onClickAdd = () => {
    //クリック時の処理  
  };
  return (
    <>
      //コンポーネント
      <InputTodo
　　　　//propsへ値を渡す
        todoText={todoText}
        onClick={onClickAdd}
        onChange={onChangeTodoText}
      />
    </>
  );
};

コンポーネント

InputTodo.jsx

//関数のエクスポート
export const InputTodo = (props) => {
  return (
    <div style={style}>
      <input
        // 渡されたpropsから値を取り出す
        value={props.todoText}
        onChange={props.onChange}
      />
      <button onClick={props.onClick}>
        追加
      </button>
    </div>
  );
};

分割代入

props.プロパティ名という書き方を、分割代入を使用して名前だけで扱えるようにする

InputTodo.jsx

export const InputTodo = (props) => {
  const { todoText } = props;
  return (
    <div>
      <input
        value={todoText} //props.todoText →　todoText
      />
    </div>
  );
};

引数

終了タグを作成し、間に引数として値を渡すことができる。
その場合、コンポーネント側ではprops.childrenとして受け取る

App.js

  return (
    <>
      //コンポーネント
      <InputTodo
　　　　//引数へ値を渡す
      >テスト</InputTodo>
    </>
  );

InputTodo.jsx

export const InputTodo = (props) => {
  return (
    <div style={style}>
      <input
        //”テスト”が渡される
        value={props.children}
      />
    </div>
  );
};