Help us understand the problem. What is going on with this article?

props.childrenを渡す方法

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>
  );
}

結果
スクリーンショット 2020-03-09 3.00.13.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away