React框架下多组件间通信实现方法咨询

Hey there! Let's break down how to handle communication between your React class components (file1.jsx, file2.jsx, file3.jsx) based on your scenario. Since you're working with class components, here are the most practical approaches tailored to your needs:

This is the React-way to handle shared state and communication between components. We'll keep all the shared state and callback functions in file1.jsx (your source of truth), then pass values and callbacks down to file2 and file3 via props.

file1.jsx #

import React, { Component } from 'react';
import FileTwo from './file2';
import FileThree from './file3';

class FileOne extends Component {
  state = {
    sharedValue: '', // The value you want to pass to file2/file3
    responseFromFile2: '',
    responseFromFile3: ''
  };

  // Callback to receive value from file2
  handleFile2Response = (value) => {
    this.setState({ responseFromFile2: value });
    // Add your operations with the returned value here
  };

  // Callback to receive value from file3
  handleFile3Response = (value) => {
    this.setState({ responseFromFile3: value });
    // Add your operations with the returned value here
  };

  // Example method to update the value passed down
  updateSharedValue = () => {
    const newValue = 'Initial data from FileOne'; // Replace with your actual value
    this.setState({ sharedValue: newValue });
  };

  componentDidMount() {
    // Fetch or calculate your initial value here
    this.updateSharedValue();
  }

  render() {
    return (
      <div>
        {/* Pass shared value and callback to FileTwo */}
        <FileTwo 
          receivedValue={this.state.sharedValue}
          sendResponse={this.handleFile2Response}
        />
        {/* Pass shared value and callback to FileThree */}
        <FileThree 
          receivedValue={this.state.sharedValue}
          sendResponse={this.handleFile3Response}
        />
      </div>
    );
  }
}

export default FileOne;

file2.jsx #

import React, { Component } from 'react';

class FileTwo extends Component {
  state = {
    localProcessedValue: ''
  };

  componentDidMount() {
    // Use the value received from FileOne
    const { receivedValue } = this.props;
    this.setState({ localProcessedValue: receivedValue.toUpperCase() }); // Example operation
  }

  // Send processed value back to FileOne
  sendDataBack = () => {
    const responseValue = this.state.localProcessedValue;
    this.props.sendResponse(responseValue);
  };

  render() {
    return (
      <div>
        <p>Received from FileOne: {this.props.receivedValue}</p>
        <p>Processed Value: {this.state.localProcessedValue}</p>
        <button onClick={this.sendDataBack}>Send Response to FileOne</button>
      </div>
    );
  }
}

export default FileTwo;

file3.jsx #

import React, { Component } from 'react';

class FileThree extends Component {
  state = {
    localProcessedValue: ''
  };

  componentDidMount() {
    // Use the value received from FileOne
    const { receivedValue } = this.props;
    this.setState({ localProcessedValue: `${receivedValue} (enhanced by FileThree)` }); // Example operation
  }

  // Send processed value back to FileOne
  sendDataBack = () => {
    const responseValue = this.state.localProcessedValue;
    this.props.sendResponse(responseValue);
  };

  render() {
    return (
      <div>
        <p>Received from FileOne: {this.props.receivedValue}</p>
        <p>Processed Value: {this.state.localProcessedValue}</p>
        <button onClick={this.sendDataBack}>Send Response to FileOne</button>
      </div>
    );
  }
}

export default FileThree;

If your components aren't in a direct parent-child hierarchy (or if you want to avoid "prop drilling"), the Context API is a great option for class components. It lets you share state and functions across your component tree without passing props manually at every level.

Step 1: Create a Context File #

// ComponentContext.js
import React from 'react';

// Create a context with default placeholder values
const ComponentContext = React.createContext({
  sharedValue: '',
  sendToFile1: () => {}
});

export default ComponentContext;

file1.jsx (Context Provider) #

import React, { Component } from 'react';
import ComponentContext from './ComponentContext';
import FileTwo from './file2';
import FileThree from './file3';

class FileOne extends Component {
  state = {
    sharedValue: '',
    componentResponses: {}
  };

  componentDidMount() {
    // Set initial value to share
    this.setState({ sharedValue: 'Base data from FileOne' });
  }

  // Handle responses from FileTwo and FileThree
  handleComponentResponse = (componentName, value) => {
    this.setState(prevState => ({
      componentResponses: { ...prevState.componentResponses, [componentName]: value }
    }));
    console.log(`Received from ${componentName}:`, value);
  };

  render() {
    // Define the context value to share with child components
    const contextValue = {
      sharedValue: this.state.sharedValue,
      sendToFile1: (componentName, value) => this.handleComponentResponse(componentName, value)
    };

    return (
      <ComponentContext.Provider value={contextValue}>
        <FileTwo />
        <FileThree />
      </ComponentContext.Provider>
    );
  }
}

export default FileOne;

file2.jsx (Context Consumer) #

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

class FileTwo extends Component {
  // Attach context to the component for easy access
  static contextType = ComponentContext;

  componentDidMount() {
    const { sharedValue } = this.context;
    console.log('FileTwo received:', sharedValue);
    // Add your operations with the shared value here
  }

  sendResponse = () => {
    const processedValue = `FileTwo processed: ${this.context.sharedValue}`;
    this.context.sendToFile1('FileTwo', processedValue);
  };

  render() {
    return (
      <div>
        <p>Received from FileOne: {this.context.sharedValue}</p>
        <button onClick={this.sendResponse}>Send Processed Data to FileOne</button>
      </div>
    );
  }
}

export default FileTwo;

file3.jsx (Context Consumer) #

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

class FileThree extends Component {
  static contextType = ComponentContext;

  componentDidMount() {
    const { sharedValue } = this.context;
    console.log('FileThree received:', sharedValue);
    // Add your operations with the shared value here
  }

  sendResponse = () => {
    const processedValue = `FileThree enhanced: ${this.context.sharedValue}`;
    this.context.sendToFile1('FileThree', processedValue);
  };

  render() {
    return (
      <div>
        <p>Received from FileOne: {this.context.sharedValue}</p>
        <button onClick={this.sendResponse}>Send Processed Data to FileOne</button>
      </div>
    );
  }
}

export default FileThree;

For even more flexible, loose coupling between components, you can use a custom event emitter. This works well if your components don't have a direct relationship and you don't want to use Context. Just remember to clean up event listeners to avoid memory leaks.

Step 1: Create an Event Emitter #

// customEmitter.js
import { EventEmitter } from 'events';

const customEmitter = new EventEmitter();
export default customEmitter;

file1.jsx (Listener) #

import React, { Component } from 'react';
import customEmitter from './customEmitter';
import FileTwo from './file2';
import FileThree from './file3';

class FileOne extends Component {
  state = {
    sharedValue: '',
    responseFromFile2: '',
    responseFromFile3: ''
  };

  componentDidMount() {
    // Set up listeners for responses
    customEmitter.on('file2:sendResponse', (value) => {
      this.setState({ responseFromFile2: value });
      // Add your operations here
    });

    customEmitter.on('file3:sendResponse', (value) => {
      this.setState({ responseFromFile3: value });
      // Add your operations here
    });

    // Set initial shared value
    this.setState({ sharedValue: 'Raw data from FileOne' });
  }

  componentWillUnmount() {
    // Clean up listeners to prevent memory leaks
    customEmitter.removeAllListeners('file2:sendResponse');
    customEmitter.removeAllListeners('file3:sendResponse');
  }

  render() {
    return (
      <div>
        <FileTwo receivedValue={this.state.sharedValue} />
        <FileThree receivedValue={this.state.sharedValue} />
      </div>
    );
  }
}

export default FileOne;

file2.jsx (Emitter) #

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

class FileTwo extends Component {
  componentDidMount() {
    const { receivedValue } = this.props;
    // Add your operations with the received value here
  }

  sendResponse = () => {
    const processedValue = `FileTwo output: ${this.props.receivedValue}`;
    // Emit an event with the processed value
    customEmitter.emit('file2:sendResponse', processedValue);
  };

  render() {
    return (
      <div>
        <p>Received from FileOne: {this.props.receivedValue}</p>
        <button onClick={this.sendResponse}>Send Response</button>
      </div>
    );
  }
}

export default FileTwo;

file3.jsx (Emitter) #

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

class FileThree extends Component {
  componentDidMount() {
    const { receivedValue } = this.props;
    // Add your operations with the received value here
  }

  sendResponse = () => {
    const processedValue = `FileThree output: ${this.props.receivedValue}`;
    // Emit an event with the processed value
    customEmitter.emit('file3:sendResponse', processedValue);
  };

  render() {
    return (
      <div>
        <p>Received from FileOne: {this.props.receivedValue}</p>
        <button onClick={this.sendResponse}>Send Response</button>
      </div>
    );
  }
}

export default FileThree;

内容的提问来源于stack exchange，提问作者Pedro Miguel Pimienta Morales