props.childrenを渡す方法

4492 ワード
React 基礎 基礎 テキストリンク

childrenって何？

<View>
    // ここの中のこと
</View>

タイトルなどのcssは同じで、中の子要素が違うデザインのコンポーネントを作る時はchildrenをpropsとして渡して使います！

やってみた

testComponent/index.jsx


import React, { FC } from "react";
import "./styles.css";

// 型はNodeになります
const Test = ({ children }: { children: Node }) => {
  return (
    <div className="childrenTitle">
      <p>元々Componentに書かれているtext</p>
      {children}
    </div>
  );
};

export default Test;

使う側

import React from "react";
import "./styles.css";
import Test from "./testComponent";

export default function App() {
  return (
    <div className="App">
      <Test>
        <p className="title">--- propsとして渡す値 ---</p>
        <p>こんな感じで子要素を渡せます!</p>
        <p>とっても便利</p>
      </Test>
    </div>
  );
}

結果