【React】コンポーネントを他のコンポーネントに渡せるpropsのchildrenの使い方

React

Reactでコンポーネントを他のコンポーネントに渡せるpropsのchildrenの使い方を紹介します。

コンポーネントを他のコンポーネントに渡す(親)

import ChildComp from "./components/ChildComp";
import Container from "./components/Container";

const profile = [
  { name: "yamada", age: 78, country: "KOREA" },
  { name: "suzuki", age: 45, country: "USA" },
];

const Func = () => {
  return (
    <div>
      <Container title="Childrenについて" >
        {'children'}
        <ChildComp {...profile[0]} />
        <ChildComp {...profile[1]} />
      </Container>
    </div>
  );
};

export default Func;

このように、コンポーネントの中にコンポーネントを入れることで、
propsと一緒にコンポーネントもpropsとして渡すことができます。
オブジェクトの配列にすることで、いろいろなデータを出力することが可能になります。

また、childrenは属性として設定することもできます。

const profile = [
  { name: "yamada", age: 78, country: "KOREA" },
  { name: "suzuki", age: 45, country: "USA" },
];

const Func = () => {
  return (
    <div>
      <Container
        title="Childrenについて"
        children={
          [(<ChildComp key={profile[0].name} {...profile[0]} />), (<ChildComp key={profile[1].name} {...profile[1]} />)]
        }
      ></Container>
    </div>
  );
};

export default Func;

その場合、コンポーネントChildCompもJavaScriptのオブジェクトのため、上のようにして渡すことができます。
ただし、この場合はkey属性でユニークな値を指定する必要があります。(指定しないとエラーになります)
よって、上のようにユニークな値のkeyを指定します。

childrenを使うコンポーネント(子)

const Container = ({ title, children }) => {
  console.log(children);
  return (
    <div className="container">
      <h3>{title}</h3>
      {children}
    </div>
  );
};

export default Container;

上のように、コンポーネントは、childrenの場所の引数で渡ってくるので、
{}で使うことができます。

childrenとして使われるコンポーネント(子)

const ChildComp = ({ name, age, country }) => {
  return (
    <div>
      <h3>Name: {name}</h3>
      <p>Age: {age} </p>
      <p>Country: {country} </p>
    </div>
  );
};

export default ChildComp;

こちらは通常と同じです。

渡すコンポーネントの順番を指定する方法(親)

import ChildComp from "./components/ChildComp";
import Container from "./components/Container";

const profile = [
  { name: "yamada", age: 78, country: "KOREA" },
  { name: "suzuki", age: 45, country: "USA" },
];

const Func = () => {
  return (
    <div>
      <Container
        title="Childrenについて"
        children={[
          <ChildComp key={profile[0].name} {...profile[0]} />,
          <ChildComp key={profile[1].name} {...profile[1]} />,
        ]}
        zero={<ChildComp key={profile[0].name} {...profile[0]} />}
        first={<ChildComp key={profile[1].name} {...profile[1]} />}
      ></Container>
    </div>
  );
};

export default Func;

コンポーネントの順番を制御したい場合があります。
そのようなときは、上のように、それぞれのコンポーネントにそれぞれの属性をつけることで、可能になります。

渡すコンポーネントの順番を指定する方法(子)

const Container = ({ title, children, zero, first }) => {
  console.log(children);
  return (
    <div className="container">
      <h3>{title}</h3>
      {children}
      {first}
      {zero}
    </div>
  );
};

export default Container;

上のようにすることで、{zero}と{first}の順番を入れ替えたりすることで表示させるコンポーネントの順番を制御することができます。

React

Posted by devsakaso