0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TypeScript+ReactでのuseContext(転何知人T+Rその7)

Last updated at Posted at 2021-08-30

前回までの状態

useEffectについて学習した。

今回の目的

useContextについて

useContext

値を受け渡す際に使用する。
propsを使用してコンポーネントからコンポーネントへ値を受け渡す場合、親コンポーネントから子コンポーネントへのバケツリレーになる。しかしuseContextを使用すると直接値を受け渡すことができる。

宣言

const Contextの変数名 = React.createContext(Contextの初期値);

受け渡し

<Contextの変数名.Provider value=受け渡す値>
<Contextを使用するコンポーネント>
</Contextの変数名.Provider>

手順

前回作成したindex.tsxを以下のように変更、追加する。

import ReactDOM from 'react-dom';
import { useState, useEffect, useContext } from 'react';//useContext追加
import React from 'react';//追加

const Name = React.createContext('')//追加


const TextOutput = () => {
  const name = useContext(Name);//追加
  return (
    <p>Hello, {name}!</p>//変更
  );
}

//コンポーネント追加
const Space = () => {
  return (
    <TextOutput />
  );
}

const TextInput = () => {
  const [str, setStr] = useState('初期値');

  useEffect(() => {
    document.title = `input is ${str} !`;
  });

  return (
    <div>
      <form >
        <label>
          入力欄<br />
          <textarea
            value={str}
            onChange={event => setStr(event.target.value)}
          />
        </label>
      </form>
      <Name.Provider value={str}>{/* 追加 */}
        <Space />{/* 変更 */}
      </Name.Provider>{/* 追加 */}
    </div>
  );
}

ReactDOM.render(
  <TextInput />,
  document.getElementById('root')
);

いつも通り、npm startでプロジェクトを実行する。
'Hello, [入力した文字列]!'が表示されれば成功。

スクリーンショット 2021-08-30 165446.png

解説

import { useState, useEffect, useContext } from 'react';//useContext追加
import React from 'react';//追加

useContextを使用するため、インポートしている。

const Name = React.createContext('')//追加

Nameを''で初期化し宣言している。

const TextOutput = () => {
  const name = useContext(Name);//追加
  return (
    <p>Hello, {name}!</p>//変更
  );
}

Nameの値をuseContextを使用してpropsを使用することなくnameに受け取り、表示させている。

//コンポーネント追加
const Space = () => {
  return (
    <TextOutput />
  );
}

useContextを使用するのが孫コンポーネントでも問題ないことを明らかにするために追加したコンポーネント。

      <Name.Provider value={str}>{/* 追加 */}
        <Space />{/* 変更 */}
      </Name.Provider>{/* 追加 */}

Space以下のコンポーネントで、値がstrのNameを受け渡すことをProviderを使用して宣言している。

要約

useContextを使用することでpropsなしの値受け渡しが可能になる。

  • 作成中

2021/11追記:転職できました

参考文献

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?