【React初学者】props親子間の受け渡し

通常の受け渡し

親

Parent.jsx

import { Child } from "../components/child";

export default function App() {
  return (
    <>
      <Child age={20}/>
    </>
  );
}

子

Child.jsx

export const Child = ({ age }) => {
  return (
    <>
      {age}
    </>
  );
};

children

親

Parent.jsx

import { Child } from "../components/child";

export default function App() {
  return (
    <>
      <Child>
        <div>children</div>
      </Child>
    </>
  );
}

子

Child.jsx

export const Child = ({ children}) => {
  return (
    <>
      {children}
    </>
  );
};

親に関数を定義して、子から呼ぶ

親

Parent.jsx

import { Child } from "../components/child";

export default function App() {
  return (
    <>
      <Child onClick={() => alert("hello")}/>
    </>
  );
}

子

Child.jsx

export const Child = ({ onClick }) => {
  return (
    <>
      <div onClick={onClick}>関数呼び出し</div>
    </>
  );
};