React Contextのメモ

親コンポーネントのstateの値を、孫コンポーネントのpropsの値として使う場合はこのような書き方になる。

index.js

import React from "react";
import ReactDOM from "react-dom";

/*　親 -> 子 -> 孫 -> .. の順に値を渡すことをバケツリレーと呼ぶ(親のstateの値を孫やひ孫のpropsにする) */
class Grandchild extends React.Component {

    render() {
        return(
            <div>{this.props.text}</div>
        )
    }

}

class Child extends React.Component {

    render() {
        return(
            <Grandchild text={this.props.text} />
        )
    }

}

class Parent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {"text": "まんち"};
    }

    render() {
        return(
            <div><Child text={this.state.text} /></div>
        )
    }

}

ReactDOM.render(<Parent />, document.getElementById("app"));

バケツリレーをせずに、親コンポーネントから直接孫やひ孫のコンポーネントに値を渡すのがContext(子コンポーネントにも渡せる)
関数コンポーネントの場合はpropsが存在しないのでこの書き方一択になる？

index.js

import React, {useState, createContext, useContext} from "react";
import ReactDOM from "react-dom";

var Context = createContext(); 

var GrandChild = function() {

    //受け取った値が文字列ならその文字列が、配列ならその配列がそのまま渡される
    var arr = useContext(Context);　
    return(
        <div>
            <p>{arr[0]}</p>
            <p>{arr[1]}</p>
        </div>
    )

}

var Parent = function() {

    var [cnt, addCnt] = useState(0);
    var [numState, switchNumState] = useState("偶数");

    function onClick(num) {
        num += 1;
        addCnt(num);
        if (num % 2 === 0) {
            numState = "偶数";
        } else {
            numState = "奇数";
        }
        switchNumState(numState);
    }

    return(
        <>
          <div>
            {/* providerコンポーネントの作成 value=渡す値 渡す値は文字数字などの単体の値やオブジェクトでも良い */}
            <Context.Provider value={[numState, cnt]}>
                <GrandChild />
            </Context.Provider>
            <input type="button" value="連打しろ!!" onClick={() => onClick(cnt)} />
          </div>
        </>
    )

}

ReactDOM.render(<Parent />, document.getElementById("app"));