React实现组件之间通信的几种常用方法

import React from 'react';

class ParentComponent extends React.Component {
  render() {
    const message = "Hello from Parent!";
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent message={message} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <p>{this.props.message}</p>
      </div>
    );
  }
}

export default ParentComponent;

import React from 'react';

class ParentComponent extends React.Component {
  handleChildMessage = (msg) => {
    alert("Message from Child: " + msg);
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent onSendMessage={this.handleChildMessage} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  sendMessage = () => {
    this.props.onSendMessage("Hello from Child!");
  }

  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <button onClick={this.sendMessage}>Send Message</button>
      </div>
    );
  }
}

export default ParentComponent;

import React from 'react';

// 创建 Context
const MessageContext = React.createContext();

class ParentComponent extends React.Component {
  state = {
    message: "Hello from Parent via Context!",
  };

  render() {
    return (
      <MessageContext.Provider value={this.state.message}>
        <NestedComponent />
      </MessageContext.Provider>
    );
  }
}

class NestedComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Nested Component</h1>
        <ChildComponent />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  static contextType = MessageContext;

  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <p>{this.context}</p>
      </div>
    );
  }
}

export default ParentComponent;

import React from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// Redux reducer
const initialState = { message: "Initial Message" };
const messageReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
};

// Create Redux store
const store = createStore(messageReducer);

// Parent Component
class ParentComponent extends React.Component {
  updateMessage = () => {
    this.props.updateMessage("New Message from Parent!");
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <button onClick={this.updateMessage}>Update Message</button>
        <ChildComponent />
      </div>
    );
  }
}

// Child Component
const ChildComponent = ({ message }) => {
  return (
    <div>
      <h2>Child Component</h2>
      <p>{message}</p>
    </div>
  );
};

// Connect components to Redux store
const mapStateToProps = state => ({
  message: state.message,
});

const mapDispatchToProps = dispatch => ({
  updateMessage: (msg) => dispatch({ type: 'UPDATE_MESSAGE', payload: msg }),
});

const ConnectedParentComponent = connect(null, mapDispatchToProps)(ParentComponent);
const ConnectedChildComponent = connect(mapStateToProps)(ChildComponent);

// App Component
const App = () => (
  <Provider store={store}>
    <ConnectedParentComponent />
  </Provider>
);

export default App;