【初心者】ReactのPropsとは

2024年6月3日

Propsとは

親コンポーネントから子コンポーネントに渡す値

子コンポーネントが動的に変化→一つの子コンポーネントが再利用できる

▼親コンポーネント

import { ColorfulMessage } from "./components/ColorfulMessage";

export const App = () => {
  return (
    <div className="App">
      <ColorfulMessage color="blue" message="お元気ですか？"/>
      <ColorfulMessage color="red" message="元気です"/>
    </div>
  );
};

export default App;

▼子コンポーネント

export const ColorfulMessage = (props) => {
// 引数のオブジェクトは分かりやすいのでpropsとすることをオススメします

const contentStyle = {
    color: props.color
}
    return (
        <p style={contentStyle}>{props.message}</p>
    )
}

タグ内で囲われた子要素をプロップスで渡すこともできます

▼親コンポーネント

<ColorfulMessage color="blue">こんにちは</ColorfulMessage>

▼子コンポーネント

const contentStyle = {
    color: props.color
}
    return (
        <p style={contentStyle}>{props.children}</p>
    )
}

階層構造のあるHTMLをまとめて渡すこともできます

オブジェクトの分割代入

export const ColorfulMessage = (props) => {

const contentStyle = {
    color: props.color,
    fontSize: "36px"
}
    return (
        <p style={contentStyle}>{children}</p>
    )
}

▼オブジェクトの分割代入

export const ColorfulMessage = (props) => {
    const { color, children } = props;

const contentStyle = {
    color: color,
    fontSize: "36px"
}
    return (
        <p style={contentStyle}>{children}</p>
    )
}

▼引数の部分で直接オブジェクトの分割代入をした場合

export const ColorfulMessage = ({color, children}) => {

const contentStyle = {
    color: color,
    fontSize: "36px"
}
    return (
        <p style={contentStyle}>{children}</p>
    )
}