React中如何从另一个组件调用/执行方法/函数？

当然可以实现这个需求啦！根据你的组件结构和getSolarDayInformation函数的性质，有几种不同的解决方案，我一个个给你讲清楚：

方案1：如果getSolarDayInformation是纯工具函数（不依赖组件内部状态） #

如果这个函数只是独立的请求函数，不需要访问tableInformation.js组件的状态、props或者生命周期，那你已经在address.js里导入它了，直接在post请求的完成回调里调用就好，完全没问题！

举个具体的代码示例：

// address.js 中的post请求部分
request.post('/api/your-address-endpoint')
  .send(yourPostData)
  .then(postResponse => {
    console.log('Post请求成功完成:', postResponse);
    // 异步调用getSolarDayInformation
    getSolarDayInformation()
      .then(getResponse => {
        console.log('获取到光伏日信息:', getResponse);
        // 这里可以根据需要处理返回的数据，比如通知其他组件或者更新状态
      })
      .catch(getErr => {
        console.error('获取光伏日信息失败:', getErr);
      });
  })
  .catch(postErr => {
    console.error('Post请求失败:', postErr);
  });

方案2：如果getSolarDayInformation是组件的实例方法（依赖组件内部状态） #

如果这个函数是tableInformation.js类组件里的实例方法（比如需要更新组件自身的状态），那直接导入调用就不行了——因为实例方法必须通过组件的实例才能执行。这时候就得用下面几种方法：

子方案2.1：状态提升（最推荐的常规做法） #

把“是否需要触发get请求”的状态提到两个组件的共同父组件里，address.js完成post后通知父组件更新状态，父组件再把这个状态传递给tableInformation.js，让它自动执行get请求。

父组件示例：

// ParentComponent.js
import React, { Component } from 'react';
import Address from './address.js';
import TableInformation from './tableInformation.js';

class ParentComponent extends Component {
  state = {
    shouldFetchSolarData: false
  };

  // 定义一个回调方法，让Address组件调用
  onAddressPostCompleted = () => {
    this.setState({ shouldFetchSolarData: true }, () => {
      // 状态更新后重置，避免重复触发
      this.setState({ shouldFetchSolarData: false });
    });
  };

  render() {
    return (
      <div className="parent-container">
        <Address onPostComplete={this.onAddressPostCompleted} />
        <TableInformation shouldFetch={this.state.shouldFetchSolarData} />
      </div>
    );
  }
}

修改address.js：

// address.js
class Address extends Component {
  // ...其他组件代码

  handleSubmit = () => {
    request.post('/api/your-address-endpoint')
      .send(yourPostData)
      .then(response => {
        // 通知父组件post请求完成
        this.props.onPostComplete();
      })
      .catch(err => {
        console.error('Post请求失败:', err);
      });
  };

  render() {
    // ...你的组件渲染内容，比如表单提交按钮绑定handleSubmit
    return <button onClick={this.handleSubmit}>提交地址</button>;
  }
}

修改tableInformation.js（类组件版本）：

// tableInformation.js
class TableInformation extends Component {
  state = {
    solarDayData: null
  };

  componentDidUpdate(prevProps) {
    // 当shouldFetch状态从false变为true时，执行get请求
    if (this.props.shouldFetch && !prevProps.shouldFetch) {
      this.getSolarDayInformation();
    }
  }

  getSolarDayInformation = () => {
    return request.get('/api/solar-day-endpoint')
      .then(response => {
        // 更新组件自身状态，渲染表格
        this.setState({ solarDayData: response.body });
        return response.body;
      })
      .catch(err => {
        console.error('获取光伏日信息失败:', err);
        throw err;
      });
  };

  render() {
    // 根据solarDayData渲染表格内容
    return (
      <div className="table-container">
        {this.state.solarDayData ? (
          <table>{/* 表格内容 */}</table>
        ) : (
          <p>加载中...</p>
        )}
      </div>
    );
  }
}

如果tableInformation.js是函数组件，就用useEffect监听状态变化：

// tableInformation.js（函数组件版本）
import React, { useState, useEffect } from 'react';
import request from 'superagent';

export const TableInformation = ({ shouldFetch }) => {
  const [solarDayData, setSolarDayData] = useState(null);

  const getSolarDayInformation = async () => {
    try {
      const response = await request.get('/api/solar-day-endpoint');
      setSolarDayData(response.body);
      return response.body;
    } catch (err) {
      console.error('获取光伏日信息失败:', err);
      throw err;
    }
  };

  useEffect(() => {
    if (shouldFetch) {
      getSolarDayInformation();
    }
  }, [shouldFetch]);

  return (
    <div className="table-container">
      {solarDayData ? (
        <table>{/* 表格内容 */}</table>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
};

子方案2.2：自定义事件（适合无共同父组件的场景） #

如果两个组件层级很深，或者没有共同的父组件，可以用浏览器的自定义事件来实现跨组件通信。

修改address.js：

// address.js的post请求回调
request.post('/api/your-address-endpoint')
  .send(yourPostData)
  .then(response => {
    // 触发自定义事件
    window.dispatchEvent(new CustomEvent('addressPostCompleted'));
  })
  .catch(err => {
    console.error('Post请求失败:', err);
  });

修改tableInformation.js（类组件）：

// tableInformation.js
class TableInformation extends Component {
  componentDidMount() {
    // 挂载时监听自定义事件
    window.addEventListener('addressPostCompleted', this.handlePostCompleted);
  }

  componentWillUnmount() {
    // 卸载时移除监听，避免内存泄漏
    window.removeEventListener('addressPostCompleted', this.handlePostCompleted);
  }

  handlePostCompleted = () => {
    this.getSolarDayInformation();
  };

  // ...getSolarDayInformation方法和渲染逻辑
}

函数组件版本用useEffect处理监听：

// tableInformation.js（函数组件）
useEffect(() => {
  const handlePostCompleted = () => {
    getSolarDayInformation();
  };

  window.addEventListener('addressPostCompleted', handlePostCompleted);

  // 清理函数，组件卸载时移除监听
  return () => {
    window.removeEventListener('addressPostCompleted', handlePostCompleted);
  };
}, []);

总结 #

• 如果是纯工具函数：直接导入调用最省事
• 如果是组件实例方法：优先用状态提升，这是React的常规做法
• 组件层级复杂/无共同父组件：用自定义事件或者Context API（Context适合全局状态共享的场景）

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