【React】コンポーネント化とProps

Reactでよくあるpropsの記述

外部コンポーネントとProps

App.jsx

import ( Message ) from './components/Message'; // コンポーネントを記述するとコードエディタで自動生成（外部化したjsxをimportする記述）がされることも多い

export const App = () => {
    // 下記のようなスタイルをコンポーネント化
    // const contentStyleA = {
        // color: orange,
        // fontSize: '24px';, // jsではハイフンを省略したキャメルケース
    // };

    return (
        // html in jsでは{}でjsを記述
        // <>
        //     <p style={contentStyleA}>How's it going?</p>
        //     <p style={contentStyleB}>Pretty good!</p>
        // </>
            
        // 外部化したコンポーネント。任意の名前でProps（オブジェクト）を渡すことができる
        <>
            <Message color='orange' message='How's it going?' />
            <Message color='green' message='Pretty good!' />
        </>
    );
};

components/Message.jsx

export const Message = (props) => { // 任意の引数（わかりやすくpropsで良さそう）
    const contentStyle = {
        color: props.color, // propsで渡されたcolor
        fontSize: '24px';,
    };

    return <p style={contentStyle}>{props.message}</p>; // propsで渡されたmessage
};

タグで囲んでpropsを渡す

App.jsx

import ( Message ) from './components/Message';

export const App = () => {
    return (
        <>
            <Message color='orange'>How's it going?</ Message> // タグで囲んでpropsを渡す
            <Message color='green'>Pretty good!</ Message>
        </>
    );
};

components/Message.jsx

export const Message = (props) => {
    const contentStyle = {
        color: props.color,
        fontSize: '24px';,
    };

    return <p style={contentStyle}>{props.children}</p>; //タグで囲んだものは.childrenで受け取るように決まっている
};

propsの分割代入、オブジェクトの省略

components/Message.jsx

export const Message = (props) => {
    const { color, children } = props; // 分割代入
    const contentStyle = {
        color, // 分割代入したのでprops.を省略。さらに、プロパティ名と値が同名になるのでオブジェクトの省略記法が使える
        fontSize: '24px';,
    };

    return <p style={contentStyle}>{children}</p>; // 分割代入したのでprops.を省略
};

引数の時点でpropsの分割代入

components/Message.jsx

export const Message = ({ color, children }) => { // 引数の時点で分割代入
    const contentStyle = {
        color,
        fontSize: '24px';,
    };

    return <p style={contentStyle}>{children}</p>;
};