React => コンポーネント間の通信

備考

Reactコンポーネント間の通信には合計3つのケースがあります。

ケース1：親と子のコミュニケーション
ケース2：子供と親のコミュニケーション
ケース3：関連していないコンポーネント（コンポーネント間の通信）

親コンポーネントと子コンポーネント

Reactの世界では非常に自然であり、チャンスはあなたがすでに使っている最も簡単なケースです。

子コンポーネントに小道具を渡すことができます。この例では、 messageは子コンポーネントに渡す小道具であり、名前メッセージは任意に選択されています。名前は任意です。

import React from 'react';

class Parent extends React.Component {
    render() {
        const variable = 5;
        return (
            <div>
                <Child message="message for child" />
                <Child message={variable} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return <h1>{this.props.message}</h1>
    }
}

export default Parent;

ここで、 <Parent />要素は、二つのレンダリング<Child />渡し、部品をmessage for child第1成分と内側5第1内部。

要約すると、もう1つ（子供）をレンダリングしていくつかの小道具を渡すコンポーネント（親）があります。

子コンポーネントから親コンポーネントへ

データを親に送り返すと、親コンポーネントから子コンポーネントへの関数として関数を渡し 、子コンポーネントはその関数を呼び出します 。

この例では、Childコンポーネントに関数を渡し、Childコンポーネント内でその関数を呼び出すことによってParent状態を変更します。

import React from 'react';

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };

        this.outputEvent = this.outputEvent.bind(this);
    }
    outputEvent(event) {
        // the event context comes from the Child
        this.setState({ count: this.state.count++ });
    }

    render() {
        const variable = 5;
        return (
            <div>
                Count: { this.state.count }
                <Child clickHandler={this.outputEvent} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return (
            <button onClick={this.props.clickHandler}>
                Add One More
            </button>
        );
    }
}

export default Parent;

親の状態を変更する親のoutputEventメソッドは、子のボタンonClickイベントによって呼び出されることに注意してください。

React
コンポーネント間の通信

サーチ…

備考

親コンポーネントと子コンポーネント

子コンポーネントから親コンポーネントへ

関連していないコンポーネント