【React】子コンポーネントで値を操作し、親コンポーネントで条件付きレンダー

10306 ワード
テキストリンク

全体のコード

pages/childToParent/index.tsx
import Parent from '../../components/childToParent/Parent'

export const App = () => {
  return (
    <>
      <Parent />
    </>
  )
}

export default App
components/childToParent/Parent.tsx
import { useState } from 'react'
import Child from './Child'

export const Parent = () => {
  const [animalName, setAnimalName] = useState('dog')

  return (
    <>
      <div>animalName:{animalName}</div>
      {animalName === `pig` && <div>子コンポーネントで`pig`を設定しました</div>}
      <Child setAnimalName={setAnimalName} />
    </>
  )
}

export default Parent
components/childToParent/Child.tsx
import { useEffect } from 'react'

type Props = {
  setAnimalName: React.Dispatch<React.SetStateAction<string>>
}

export const Child = ({ setAnimalName }: Props) => {
  useEffect(() => {
    const newAnimalName = `pig`
    setAnimalName(newAnimalName)
  }, [])

  return <div>子コンポーネント</div>
}

export default Child

説明

Next.js + TypeScriptの環境で書いています。

ここで子コンポーネント Child を呼び出すか否かで処理が変わります。
かなり簡略化したコードですが、
子要素の数に応じて親？のタイトルを変えるとか、
だいたい似たような処理でできます。

子コンポーネント Child を呼び出さない場合

components/childToParent/Parent.tsx
{/* <Child setAnimalName={setAnimalName} />


useState初期値のままの値が入っている。

子コンポーネント Child を呼び出す場合

components/childToParent/Parent.tsx
<Child setAnimalName={setAnimalName} />


子コンポーネントでstateの中身をいじったデータが入っている。
中身がpigだった場合の条件付きレンダーも機能している。

iOS アプリの dSYM を CI 経由で Crashlytics に 継続的に Upload する Tips
BitriseからのSlack通知にBuildにかかった時間を表示させる