React组件通信：如何优雅地实现组件间的数据传递

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
  render() {
    return <ChildComponent name="Alice" />;
  }
}
export default ParentComponent;
// ChildComponent.js
import React from 'react';
class ChildComponent extends React.Component {
  render() {
    return <p>Hello, {this.props.name}!</p>;
  }
}
export default ChildComponent;

// ParentComponent.js
import React from 'react';
import SiblingComponentA from './SiblingComponentA';
import SiblingComponentB from './SiblingComponentB';
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sharedData: 'Hello from ParentComponent!',
    };
  }
  render() {
    return (
      <div>
        <SiblingComponentA sharedData={this.state.sharedData} />
        <SiblingComponentB sharedData={this.state.sharedData} />
      </div>
    );
  }
}
export default ParentComponent;
// SiblingComponentA.js
import React from 'react';
class SiblingComponentA extends React.Component {
  render() {
    return <p>Component A says: {this.props.sharedData}</p>;
  }
}
export default SiblingComponentA;
// SiblingComponentB.js
import React from 'react';
class SiblingComponentB extends React.Component {
  render() {
    return <p>Component B says: {this.props.sharedData}</p>;
  }
}
export default SiblingComponentB;

// ThemeContext.js
import React from 'react';
const ThemeContext = React.createContext('light');
export default ThemeContext;
// Toolbar.js
import React from 'react';
import ThemeContext from './ThemeContext';
class Toolbar extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <div>Current theme: {this.context}</div>;
  }
}
export default Toolbar;
// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import Toolbar from './Toolbar';
class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}
export default App;

// eventBus.js
import { EventEmitter } from 'events';
const eventBus = new EventEmitter();
export default eventBus;
// ComponentA.js
import React from 'react';
import eventBus from './eventBus';
class ComponentA extends React.Component {
  componentDidMount() {
    eventBus.on('customEvent', this.handleCustomEvent);
  }
  componentWillUnmount() {
    eventBus.removeListener('customEvent', this.handleCustomEvent);
  }
  handleCustomEvent = () => {
    // handle custom event
  }
  render() {
    // component A
  }
}
export default ComponentA;
// ComponentB.js
import React from 'react';
import eventBus from './eventBus';
class ComponentB extends React.Component {
  handleClick = () => {
    eventBus.emit('customEvent');
  }
  render() {
    // component B
  }
}
export default ComponentB;