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

Question

我想访问this.props.apiendpointapi.js中导入的组件基类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不是很好的做法。

任何帮助将不胜感激。

Answer 1

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

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

然后从测试中调用它.js通过将 prop 作为参数传递。

import PropTypes from 'prop-types';
import {fetchData}  from api.js;
const test = ({
}) => {
console.log(fetchData(this.props.apiendpoint));
}