概要

今回は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;

ここではボタンを３つ用意してそれぞれクリックすると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システムについてみました。
参考になれば幸いです。

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

概要

準備

実装

まとめ