当事件发生(点击按钮)时，如何将数据从模式对话框发送到侧边栏(反之亦然)？

在Web开发中，实现模式对话框与侧边栏之间的数据传输通常涉及以下几种方法：

基础概念

事件监听：监听特定事件（如点击按钮）的发生。
状态管理：使用全局状态管理工具或组件内部状态来共享数据。
回调函数：通过回调函数传递数据。
事件总线：创建一个中央事件系统来处理跨组件的通信。

类型与应用场景

Props 和 Callbacks：适用于父子组件间的通信。
Context API：适用于跨多层级组件的数据传递。
Redux/MobX：适用于大型应用的全局状态管理。
自定义事件：适用于非父子组件间的通信。

示例代码

假设我们有一个简单的React应用，包含一个模式对话框和一个侧边栏，我们希望在点击按钮时交换数据。

使用回调函数

// 父组件
import React, { useState } from 'react';
import Modal from './Modal';
import Sidebar from './Sidebar';

function App() {
  const [data, setData] = useState('');

  const handleDataChange = (newData) => {
    setData(newData);
  };

  return (
    <div>
      <Sidebar data={data} />
      <Modal onDataChange={handleDataChange} />
    </div>
  );
}

export default App;

// Modal组件
import React from 'react';

function Modal({ onDataChange }) {
  const handleClick = () => {
    onDataChange('New Data from Modal');
  };

  return (
    <div>
      <button onClick={handleClick}>Send Data to Sidebar</button>
    </div>
  );
}

export default Modal;

// Sidebar组件
import React from 'react';

function Sidebar({ data }) {
  return (
    <div>
      <p>Data from Modal: {data}</p>
    </div>
  );
}

export default Sidebar;

使用Context API

// DataContext.js
import React, { createContext, useState } from 'react';

export const DataContext = createContext();

export const DataProvider = ({ children }) => {
  const [data, setData] = useState('');

  return (
    <DataContext.Provider value={{ data, setData }}>
      {children}
    </DataContext.Provider>
  );
};

// App组件
import React from 'react';
import { DataProvider } from './DataContext';
import Modal from './Modal';
import Sidebar from './Sidebar';

function App() {
  return (
    <DataProvider>
      <div>
        <Sidebar />
        <Modal />
      </div>
    </DataProvider>
  );
}

export default App;

// Modal组件
import React, { useContext } from 'react';
import { DataContext } from './DataContext';

function Modal() {
  const { setData } = useContext(DataContext);

  const handleClick = () => {
    setData('New Data from Modal');
  };

  return (
    <div>
      <button onClick={handleClick}>Send Data to Sidebar</button>
    </div>
  );
}

export default Modal;

// Sidebar组件
import React, { useContext } from 'react';
import { DataContext } from './DataContext';

function Sidebar() {
  const { data } = useContext(DataContext);

  return (
    <div>
      <p>Data from Modal: {data}</p>
    </div>
  );
}

export default Sidebar;