【React】propsを使ってコンポーネントに値を渡す

Reactでpropsを使ってコンポーネントに値を渡したい！

概要

今回の記事では、Reactでpropsを使ってコンポーネントに値を渡す手順を掲載する。

仕様書

環境

node v21.1.0
npm 10.8.1
react 18.3.1
react-dom 18.3.1

手順書

自己終了タグ編と開始タグ＆終了タグ編の２部構成です。

自己終了タグ編

<App text="value" />という感じで単体のタグの場合の例。

まずindex.tsx。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

root.render(
    <React.StrictMode>
        <App text={"Test!!!!!"} />
    </React.StrictMode>
);

reportWebVitals();

app.tsxの中でpropsで使うインターフェイスを宣言する。

import React from 'react';

interface AppProps {
    text: string;
}

const App: React.FC<AppProps> = ({ text }) => {
    return (
        <div>
            {text}
        </div>
    );
}

export default App;

開始タグ＆終了タグ編

<App text="value"><p>TEST!</p></App>という感じで開始タグと終了タグを使う場合の例。

まずindex.tsx。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

root.render(
    <React.StrictMode>
        <App text={"Test!!!!!"}>
            <p>aaa</p>
            <p>bbb</p>
            <p>ccc</p>
        </App>
    </React.StrictMode>
);

reportWebVitals();

app.tsxの中でpropsで使うインターフェイスを宣言する。

import React from 'react';

interface AppProps {
    text: string;
    children?: React.ReactNode;
}

const App: React.FC<AppProps> = ({ text }) => {
    return (
        <div>
            {text}
            {children}
        </div>
    );
}

export default App;

まとめ（感想文）

可変的なコンポーネントを作る時に使えるかもね！