如何在 React 组件中导入的非组件类中使用 props 值答案

【问题标题】：How to use props value in non component class which imported in component in React如何在 React 组件中导入的非组件类中使用 props 值
【发布时间】：2021-09-23 19:03:42
【问题描述】：

我想在api.js 中访问this.props.apiendpoint，它是在组件基类test.js 中导入的。

# api.js
import axios from 'axios';
export function fetchData(){
   return axios.post(apiendpoint);
}

# App.js
import test from test.js
export default class App extends Component {
  constructor() {
    this.apiendpoint = 'api.example.com';
  }
   
  render() {
    <test apiendpoint = {apiendpoint} />
  }
}

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

const test = ({
}) => {
   console.log(this.props.apiendpoint); // this value how to acccess in api.js 
   fetchData();
}
test.propTypes = {
apiendpoint: PropTypes.String,
}
test..defaultProps = {
apiendpoint : null,
}

就像fetchData() 我有很多与API 相关的函数，为每个函数传递apiendpoint 不是很好的做法。

任何帮助将不胜感激。

【问题讨论】：

为什么不作为参数传递给函数？
表示fetchData(this.props.apiendpoint) ?像 fetchData 我有很多与 API 相关的函数，每个函数的传递 apiendpoint 都是不好的做法
我应该如何知道您是否有许多其他功能要使用this.props.apiendpoint？它不包括在问题中。您的用例似乎是一个设计错误，为什么您需要在导出操作的文件中使用组件的道具？
更新问题。
AFAIU，您在组件构造函数中创建一个端点字符串，并将其传递给另一个组件，该组件应该将其传递给带有操作的外部文件。我最好的选择是设置 axios 默认 baseUrl，例如 axios.defaults.baseUrl = this.props.apiendpoint

标签： javascript reactjs typescript react-hooks react-props

【解决方案1】：

我会添加 apiEndPoint 作为 fetchData 函数的参数。

# api.js
import axios from 'axios';
export function fetchData(apiendpoint){
   return axios.post(apiendpoint);
}

然后通过传递 prop 作为参数从 test.js 调用它。

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

const test = ({
}) => {
   console.log(fetchData(this.props.apiendpoint));

}

【讨论】：

感谢您的回答，但这不适合我的问题。