React Propsについて

始めに

reactに入門しました。reactを触って見てもっと触って見たいと言う気持ちがあり、フロントの習得はreact + typescriptを目指すべく、今回はpropsについて書学者なりにまとめていきます。

Props

• 親コンポーネントから子コンポーネントにデータを渡してやる為の方法。
• 具体的には親で渡したいデータを属性値として定義して子に渡してやります。
• 子は引数として受けとります。そしてデータを使う際には {} ないで記述していきます。

//親
import Childern from './Childerm';

const App = () => {
  return (
     <>
       <Childern testValue='this is data of children' />
     </>
  );
}

子で受け取る場合

const Childern = (props) => {
   const {testValue} = props;
   return (
      <>
         <p>{testValue}</p>
      </>
   );
}

//ブラウザー上で
//thi is data of childern

children

子コンポーネントを内包する全ての親要素をpropsとして渡してやる方法。

まずは子コンポーネントから

import React from "react";
import Header from "../Header/Header";

const Layout = ({ children }) => {
  return (
    <>
      <Header />
      {children}
    </>
  );
};

export default Layout;

親コンポーネント

import React from "react";
//componets
import Layout from "../components/layouts/Layout";

const TopPage = () => {
  return (
    <>
      <Layout>
        <div>top page</div>
      </Layout>
    </>
  );
};

export default Top;

内包している全ての要素を渡している。
なのでcomponentや関数、はたまたHTMLで記述した要素全てを渡すことが出来ます。
共通のlayoutを作成する際は活用できる印象です。
layoutだけじゃなく、一覧表示ページを作成するにも役に立ちそうです。

---

終わりに

さらに実用的な記述方法があればアップしていきます。