TypeScript

教師コンポーネント

出典: 【React×Typescript】typeのPropsをジェネリックで定義して共通化する — Reactでコンポーネントを２つ用意する / 教師コンポーネント

教師コンポーネント (typescript)#1a5f1a093793

import React, {FC} from 'react';
 
const Teacher : FC = () => {
    return (
        <div>
            <h2>先生コンポーネント</h2>
            <p>名前：</p>
            <p>教える教科：</p>
        </div>
    );
};
 
export default Teacher;

▸ この snippet は実行結果未収録

▸ 実行結果は未収録です

id: #1a5f1a093793
lines: 13
extracted: 2026-06-10

Source収録記事

この snippet は記事の「Reactでコンポーネントを２つ用意する / 教師コンポーネント」セクションに登場する。コードの前後の文脈・ハマりどころの解説は記事本文で。

技術記事

【React×Typescript】typeのPropsをジェネリックで定義して共通化する

5年前5 min

同じ記事から

11 件

TypeScript

import React, {FC} from 'react';

const Student : FC = () => {
    return (

未収録

生徒コンポーネント

#729f1587a369

TypeScript

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Student from "./Components/Student";

未収録

実行結果

#720620dbe2a8

TypeScript

type Props = {
    Name : string,
    Gakunen : number
}

未収録

生徒コンポーネント

#0c757106cf6f

TypeScript

type Props = {
    Name : string,
    Kyouka : string
}

未収録

教師コンポーネント

#3eab11d27cb9

TypeScript

import React, {FC} from 'react';

type Props = {
    Name : string,

未収録

それぞれのコンポーネントで受け取れるようにする

#2ef1d9381b68

TypeScript

    <div className="App">
      <Student　Name={"鈴木"} Gakunen={3}/>
      <Teacher/>

未収録

それぞれのコンポーネントで受け取れるようにする

#f8304cbaf936

図鑑トップ