Reactでchildrenにpropsを渡す 👨‍👩‍👧 - みかづきブログ・カスタム

f:id:kimizuka:20210416093201p:plain

基本的には、React.cloneElementを使い、propsを固定した状態のcomponentを作るのがセオリーのようです。

ja.reactjs.org

イメージ的には、Function.prototype.bindを使って引数を固定した関数を作るのに似ている気がしました。

developer.mozilla.org

実際に例を見てみましょう。

ChildElement.tsx

export default function ChildElement({ onClick }: {
  onClick: () => void
}) {
  return (
    <button onClick={ onClick }>button</button>
  )
}

まずは子コンポーネントです。
クリックするとonClickを発火します。

ParentElement.tsx

import { cloneElement } from 'react';

export default function ParentElement({ children }: {
  children: ReactElement
}) {
  const childrenWithProps = cloneElement(children, {
    onClick: () => alert('親からの指示')
  });

  return (
    <div>{ childrenWithProps }</div>
  )
}

次に親コンポーネントです。
渡されるであろう子コンポーネントのクリックイベントを上書きしてコンポーネントをクローンします。

page/index.tsx

import ParentElement from './ParentElement';
import ChildElement from './ParentElement';

export default function IndexPage() {
  return (
    <ParentElement>
      <ChildElement onClick={ () => alert('子の意思') } />
    </ParentElement>
  )
}