普段Vueを触ってる人がReactを触ると親子間の受け渡しについて調べることになると思ったのでその時用のメモ。

結論からだが調べた限りReactに子どもが変更してはいけない制約はない。
なので値の変更についてはバケツリレーではなく、親からあらかじめ変更手段を渡しておくのがよさそう。
というか書いていてフックってそういうことかと納得。
元コンポーネントはNativeBaseを使っている想定です。

useStateconst [value, setValue] = useState('')といった使い方を見かけるが、親側で必要なのはデータの初期化ぐらいなので、今回の場合はまとめて子に渡す。

export const Parent = () => {
  const nameState = useState('')

  return (
    <NameForm { ...{ nameState } } />
  )
}

子側では親側で渡した値が第一引数で渡ってくるので、あらかじめ型を定義しておき、よく見かける形で使用する。

React.Dispatch<React.SetStateAction<string>>の部分の定義はここでしか使用しないならば、importが面倒なので、単純に(name: string) => voidでも問題ない(と思っている。)

type Props = {
  nameState: [boolean, React.Dispatch<React.SetStateAction<string>>]
}

export const NameForm = (props: Props) => {
  const [name, setName] = props.nameState

  return (
    <Input
      value={ name }
      onChangeText={ name => setName(name) }
    />
  )
}

まだ触り始めでもっと適切なやり方があるかもだけど、今のところはこれでいけてる。

プロフィール画像

ふじわら

よくわからないもので戯れてたら自分のことすらよくわからない人間になってしまいました。

ひっそりYouTubeしてます。