React中如何在组件引入的非组件API工具函数中使用props传递的值

以下是3种适配不同场景的实现方案，均不需要给每个API函数单独传递endpoint参数：

方案1：封装可配置的axios实例（最通用，适合动态endpoint场景） #

全局只需要配置一次endpoint，所有API函数自动复用配置：

第一步：修改api.js #

// api.js
import axios from 'axios';

// 创建通用axios实例
const apiInstance = axios.create();

// 导出全局配置方法，仅需初始化时调用一次
export const setApiConfig = (endpoint) => {
  apiInstance.defaults.baseURL = endpoint;
};

// 所有请求函数复用配置好的实例，无需单独传endpoint
export function fetchData() {
  return apiInstance.post('/your/interface/path');
}

export function fetchOtherData() {
  return apiInstance.get('/other/interface/path');
}

第二步：App组件初始化时完成全局配置 #

// App.js
import Test from './test.js'
import { setApiConfig } from './api.js'
import { Component } from 'react';

export default class App extends Component {
  constructor() {
    super();
    this.apiendpoint = 'https://api.example.com';
    // 全局配置endpoint
    setApiConfig(this.apiendpoint);
  }
   
  render() {
    return <Test apiendpoint={this.apiendpoint} />
  }
}

第三步：组件直接调用API函数即可 #

// test.js
import PropTypes from 'prop-types';
import { fetchData } from './api.js';

const Test = ({ apiendpoint }) => {
   console.log(apiendpoint);
   // 直接调用，无需传endpoint参数
   fetchData();
   return <div></div>
}
Test.propTypes = {
  apiendpoint: PropTypes.string,
}
Test.defaultProps = {
  apiendpoint : null,
}

export default Test;

方案2：环境变量配置（适合endpoint固定、构建时确定的场景） #

如果endpoint仅区分开发/测试/生产环境，运行时不需要修改，可以直接用React内置环境变量，完全不需要传递props：

1. 项目根目录新建.env文件，写入配置：

REACT_APP_API_ENDPOINT=https://api.example.com

2. 直接在api.js中调用即可：

// api.js
import axios from 'axios';

const baseURL = process.env.REACT_APP_API_ENDPOINT;

export function fetchData(){
   return axios.post(`${baseURL}/your/interface/path`);
}

方案3：Context注入API服务（适合运行时动态切换endpoint场景） #

如果项目需要在运行时切换不同endpoint（比如多租户、多区域切换场景），可以用React Context注入API服务，不需要逐层传递props：

// ApiContext.js
import { createContext, useContext } from 'react';
import axios from 'axios';

const ApiContext = createContext(null);

export const ApiProvider = ({ children, endpoint }) => {
  const apiInstance = axios.create({ baseURL: endpoint });
  const apiService = {
    fetchData: () => apiInstance.post('/your/interface/path'),
    fetchOtherData: () => apiInstance.get('/other/interface/path'),
    // 所有API函数统一在这里定义
  }
  return <ApiContext.Provider value={apiService}>{children}</ApiContext.Provider>
}

// 自定义Hook，组件直接调用即可获取API服务
export const useApi = () => useContext(ApiContext);

App组件中注入配置：

// App.js
import Test from './test.js'
import { ApiProvider } from './ApiContext.js'
import { Component } from 'react';

export default class App extends Component {
  constructor() {
    super();
    this.apiendpoint = 'https://api.example.com';
  }
   
  render() {
    return (
      <ApiProvider endpoint={this.apiendpoint}>
        <Test />
      </ApiProvider>
    )
  }
}

组件中使用：

// test.js
import { useApi } from './ApiContext.js';

const Test = () => {
  const api = useApi();
  // 直接调用API函数
  api.fetchData();
  return <div></div>
}

内容的提问来源于stack exchange，提问作者Avinash Dalvi