親から子への情報を送る

さまざまなレベルのコンポーネント間のデータを渡すことは重要であり、また、reactjsで行うトリッキーなことです.親から子へのデータフローは簡単で、本当にまっすぐになりますが、小道具を使っているのですが、親から子までは少しトリッキーになります.
まず最初にしなければならないことは、親からコールバック関数を作成して、子プロセスからアクセスしたパラメータを受け取り、子プロセスに関数としてコールバック関数を送ることです.

import React, { useState, Component} from 'react';
import ChildComponent from './child-component/child-component'

class Parent extends Component {

constructor(props) {
        super(props);
        this.state = {
            message: ''
        };
    }

modifyMessage= (data) => {
      this.setState({message: data})
},

 render() {
        return (
            <div>
                 <ChildComponent parentCallback = {this.modifyMessage}/>
                 <h1> {this.state.message} </h1>
            </div>
        );
    }
}

これを行うことで、子プロセスでデータを渡す必要があります.小道具この場合、ページのボタンのクリックでイベントが送信されます.

import React, { Component} from 'react';

class Child extends Component {

constructor(props) {
        super(props);
    }

handleClick = (e) => {
    this.props.parentCallback('wow you click the child component');
};

 render() {
        return (
            <div>
                 <button onClick={this.handleClick}>Click this child!</button>
            </div>
        );
    }
}

子プロセスのボタンがクリックされると、親の' modifyMessage 'をトリガーし、「WOWをクリックして子要素」としてメッセージを設定します.そのようなことをしなければ、関数の外でデータを使用できませんでした.
私は、この例があなたのすべてに役立つことを望みます.