React 兄弟組件通信(context)

React 是一個由 Facebook 所開發的 JavaScript 函式庫，可以用來建立用戶端的網頁應用程式，它可以讓開發者建立可重複使用的 UI 組件，並且可以讓開發者更容易地建立和維護大型應用程式。

React 兄弟組件通信(context)是一種技術，可以讓 React 組件之間進行通信，而不需要透過父組件傳遞 props。它可以讓開發者更容易地將資料傳遞到應用程式的不同部分，並且可以讓開發者更容易地管理應用程式的資料流。

React 兄弟組件通信(context)的基本原理是，它使用一個特殊的 React 組件，稱為 Context Provider，來將資料傳遞到應用程式的不同部分。Context Provider 可以將資料傳遞到它的子組件，並且可以將資料傳遞到它的兄弟組件。

如何使用 React 兄弟組件通信(context)

要使用 React 兄弟組件通信(context)，首先需要建立一個 Context Provider 組件，並且將資料傳遞到它的子組件：

import React, { createContext } from 'react';

const MyContext = createContext();

class MyProvider extends React.Component {
  state = {
    name: 'John',
    age: 30
  };

  render() {
    return (
      
        {this.props.children}
      
    );
  }
}

export default MyProvider;

接著，可以在其他組件中使用 Context Provider，以將資料傳遞到它的子組件：

import React, { Component } from 'react';
import MyContext from './MyContext';

class MyComponent extends Component {
  render() {
    return (
      
        {(context) => (
          
            Name: {context.state.name}
            Age: {context.state.age}
          
        )}
      
    );
  }
}

export default MyComponent;

最後，可以在其他組件中使用 Context Provider，以將資料傳遞到它的兄弟組件：

import React, { Component } from 'react';
import MyContext from './MyContext';

class MySiblingComponent extends Component {
  render() {
    return (
      
        {(context) => (
          
            Name: {context.state.name}
            Age: {context.state.age}
          
        )}
      
    );
  }
}

export default MySiblingComponent;

React 兄弟組件通信(context)可以讓開發者更容易地將資料傳遞到應用程式的不同部分，並且可以讓開發者更容易地管理應用程式的資料流。