どのように反応する他のコンポーネントに1つのコンポーネントからデータを渡すには?

小道具は、コンポーネント間のデータを渡すために使用されます.通常、親コンポーネントから子コンポーネントへのデータを渡すために使用します.
しかし、子コンポーネントから親コンポーネントへデータを渡す必要がある場合はどうなりますか?あなたが兄弟間のデータを渡す必要がある場合は?
あるコンポーネントから別のコンポーネントへデータを渡す方法は複数あります.

1 .小道具の使用

使えますprops 親から子要素へデータを渡す.Example 1 このサンプルコードを示します.

|--- App.js
  |---- ParentComponent
       |----ChildComponent

2 . ReadTexapiや状態管理ライブラリの使用

ReduxまたはRetritionAPIはあなたのアプリケーションを管理するためにセントラルステート管理の機能を提供します.これは、すべてのアプリケーションの状態は、ストアとして知られている単一の場所に格納されることを意味します.
伝統的なデータベースは、アプリケーションのレコードのポイントを表すように、あなたのストアは、クライアント側の'単一のソースのソース'、またはデータベースとして考えることができます.

例1 - 1親コンポーネントから子要素へデータを渡すためにpropsを使う
ParentComponentjs

import React from 'react'
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
render(){
    return(
    <div>
        <ChildComponent message="Data from first component"/>
    </div>
      );
   }
}

export default ParentComponent;

子コンポーネント.js

import React from 'react';
const ChildComponent = (props) => {
    return(
          <h2> {props.message} </h2>
    );
}
export default ChildComponent;

上記のコードスニペットは、親から子コンポーネントまでデータを渡す方法を示します.
しかし、子から親コンポーネントへデータを渡す必要がある場合は?これを次で見ましょう!

コールバック関数としてpropsを使う

のような状態管理ライブラリを使用していない場合Redux or React ContextAPI そして、あなたは子供から親コンポーネントまでデータを渡す必要があります.

---App  
 |---- Table.js
    |---- ListItem.js

プレビュー

UseCase -表の任意の行をクリックすると、テーブルのメインページに表示される行データを取得する機能を実装します.
解決-コールバック関数として小道具を使用します.以下の例でどのように見ましょう!

import React from 'react'
import ListItem from './ListItem';

export class Table extends React.Component {

// Dummy data for the table
state = {
   data: tableData
}

getData = (rowData) => {
// This is the row data from ChildComponent
  console.log(rowData);
}

render(){
     return(
          <div>                 
              {this.state.data.map(item => (
                   <ListItem rowData={item} handleClick={this.getData}/>
              ))}
       </div>               
        );
    }
}


import React from 'react';
const ListItem = (props) => {
 return(
    // Using Props handleClick as callback function
          <div onClick={()=> props.handleClick(props.rowData)}>
                <p> {props.rowData.company} </p>
                <p> {props.rowData.contact} </p>
                <p> {props.rowData.country} </p>
           </div>
 );
}
export default ListItem;

私は今あなたが反応コンポーネント間のデータの通過方法を理解してほしい.任意の間違いを見つける場合は、下記のコメントでそれを修正すること自由に感じなさい.私はまだ学んでいると私は学ぶものを文書化.
私はこのポストであなたの考えとレビューを知っていたいです.
Subscribe to my email newsletter and stay updated!
乾杯!