インタビューの質問 - React (7): React コンポーネントのコミュニケーション

React 開発では、コンポーネント通信が中心的な概念であり、これにより、さまざまなコンポーネントが連携して、より複雑な対話とデータ転送を実現できるようになります。一般的なコンポーネントの通信方法: 親から息子、息子から父親

1. 父と子のコミュニケーション

親コンポーネントから子コンポーネントにデータを渡すことは、React における最も一般的な通信形式です。このアプローチは、上位レベルのコンポーネントからその直接の子コンポーネントにデータを渡すのに適しています。

実装方法：
サブコンポーネントにプロパティ（props）を追加してデータを渡します。

例：

親コンポーネント

import React from 'react';
class ParentComponent extends React.Component {
  render() {
    const message = "Hello from parent!";
    return <ChildComponent message={message} />;
  }
}

サブアセンブリ

import React from 'react';
class ChildComponent extends React.Component {
  render() {
    return <p>{this.props.message}</p>;
  }
}

上記の例では、データは属性ParentComponentを通じて渡され、子コンポーネントはこのデータにアクセスしてレンダリングできます。messageChildComponentthis.props

2. 息子から父親へのコミュニケーション

子コンポーネントから親コンポーネントへのデータの受け渡しやイベントの発生も、一般的な通信形式です。このアプローチは、子コンポーネントがその親コンポーネントにデータを渡す必要がある状況に適しています。

実装方法：
サブコンポーネント内にコールバック関数を定義し、このコールバック関数をサブコンポーネントに渡すことで、サブコンポーネントは適切なタイミングでこの関数を呼び出してデータを転送します。

例：

親コンポーネント

import React from 'react';
class ParentComponent extends React.Component {
  handleDataFromChild(data) {
    console.log("Data from child:", data);
  };

  render() {
    return <ChildComponent onDataReady={data => this.handleDataFromChild(data)} />;
  }
}

サブアセンブリ

import React from 'react';
class ChildComponent extends React.Component {
  sendDataToParent() {
    const data = "Data from child!";
    this.props.onDataReady(data);
  };

  render() {
    return <button onClick={() => this.sendDataToParent()}>Send Data</button>;
  }
}

上記の例では、コールバック関数がpropsChildComponentを介して親コンポーネントに渡されます。onDataReady子コンポーネント内のボタンがクリックされると、このコールバック関数が呼び出され、データが親コンポーネントに渡されます。

3. 応用例

以下では、実際の応用例を使用して、父から息子、および息子から父へのコミュニケーション方法の応用を示します。

親コンポーネント

import React, { Component } from 'react'
class ParentComponent extends Component {
  constructor() {
    super()
    this.state = {
      tabs: ["首页", "热门", "我的"],
      curIndex: 0
    }
  }
  tabClick(ind) {
    this.setState({ curIndex: ind })
  }
  render() {
    const {tabs, curIndex} = this.state
    return (
      <div className="App">
        <ChildComponent tabs={tabs} tabClick={(ind) => this.tabClick(ind)} />
        <h2>{tabs[curIndex]}</h2>
      </div>
    );
  }
}

サブアセンブリ

import React, { Component } from 'react'
class ChildComponent extends Component {
  constructor() {
    super() 
    this.state = {
      currentIndex: 0
    }
  }
  changeTab(ind) {
    this.setState({ currentIndex: ind })
    this.props.tabClick(ind)
  }
  render() {
    const { tabs } = this.props
    const { currentIndex } = this.state
    return (
      <div>
        <ul className='tabUl'>
          {
            tabs.map((item, ind) => {
              return(
                <li 
                  key={item} 
                  className={`${currentIndex === ind ? "active" : ''}`}
                  onClick={e => this.changeTab(ind)}
                >
                  <span>{item}</span>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

上記の例ではタブ切り替え効果を実現しており、親コンポーネントが子コンポーネントに情報を渡し、子コンポーネントがコールバックをトリガーしてクリックされたタブの添字を渡すことで切り替え効果を実現しています。

人気のある