Help us understand the problem. What is going on with this article?

Contextシステムを使ってみたよ

More than 1 year has passed since last update.

概要

今回はContextシステムを使ってみました。Reactはpropsを使って親から子へバケツリレーのように要素を渡していきますが、子要素が多くなってくると辛くなってきます。そこでContextシステムを使えば一気に渡したい子要素へ渡せるのでそれを紹介します。

準備

まずはコンテキストを作ります。

src/ButtonContext.js
import React from 'react';

export default React.createContext();

そのままです。

実装

実装していきます。

src/components/App.js
import React from 'react';
import Field from './Field';
import ButtonContext from '../ButtonContext';

class App extends React.Component {
  state = { text: '' };

  render() {
    return (
      <div>
        <button onClick={() => this.setState({text: 'button1'})}>button1</button>
        <button onClick={() => this.setState({text: 'button2'})}>button2</button>
        <button onClick={() => this.setState({text: 'button3'})}>button3</button>
        <ButtonContext.Provider value={this.state.text}>
          <Field />
        </ButtonContext.Provider>
      </div>
    );
  }
}

export default App;

ここではボタンを3つ用意してそれぞれクリックするとstateに文字を保存しています。
Fieldコンポーネントはダミーになっています。
目標としてはその下のコンポーネントにstate情報を渡したいです。
FieldコンポーネントをProviderでラップします。
valueキーワードに渡したい要素を入れてあげます。

src/components/Field.js
import React from 'react';
import ButtonText from './ButtonText';

const Field = () => {
  return (
    <div>
      <ButtonText />
    </div>
  );
};

export default Field;

これはただ単にButtonTextコンポーネントをおいてるだけです。

src/components/ButtonText.js
import React from 'react';
import ButtonContext from '../ButtonContext';

class ButtonText extends React.Component {
  onShowText(value) {
    return `This is a ${value}`;
  }

  render() {
    return (
      <div>
        <ButtonContext.Consumer>
          {(value) => this.onShowText(value)}
        </ButtonContext.Consumer>
      </div>
    );
  }
}

export default ButtonText;

ここでは親のstateを取得するためにConsumerでラップしています。
Consumerは関数を置かなければなりません。
その引数にProviderのvalueキーワードを取得することができます。
ここではヘルパーメソッドを定義して文字を書いています。
これでボタンをクリックするたびにそれぞれのテキストが出てくるはずです。

まとめ

Contextシステムについてみました。
参考になれば幸いです。

kuropp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away