Javascript 什么'；跨react组件使用自定义api客户端的惯用方法是什么？

我的前端应用程序包含ApiClient类，该类隐藏了与我的服务器进行http通信的详细信息。 这是一个简单的TypeScript类，axios客户端作为私有字段

我对在根组件上初始化客户机并将其传递给一些子组件表示怀疑

此时，我在根组件中将客户端初始化为构造函数中的简单js字段：

constructor（）{
超级（）
…//init state在这里
…//像这样的一些初始化。handler=this.handler.bind（this）
this.apiClient=新的apiClient（）
}

一些子组件也依赖于

apiClient

（例如，登录组件应向登录端点发送请求，editModal组件发送按id更新实体的请求）。 现在我将ApicClient作为道具传递：

}
...

将其传递给组件的惯用方式是什么？将客户端作为道具传递是否正确？

---

如果我正确理解react文档，则使用道具和状态进行渲染，这对我来说有点混淆

如果您的api客户端不依赖于组件中的任何道具/状态，最好的方法是单独初始化它，然后在需要使用它的文件中导入：

// apiClient.js

export const apiClient = new ApiClient();

// component.js 

import {apiClient} from '../apiClient';

如果需要在组件内部处理登录/注销，该组件在api客户端内部设置令牌，则可以添加

login

和

logout

方法，这些方法将在初始化客户端后调用。由于您的应用程序中只有一个客户端实例，这些更改（登录和注销）将在使用客户端的所有组件中生效：

// Client.js
class ApiClient {
  constructor() {
    // do intance init stuff if needed
    this.token = null;
  }

  login(token) {
    this.token = token;
  }

  logout() {
    this.token = null;
  }
}


// apiClient.js

export const apiClient = new ApiClient();

// component.js 

import { apiClient } from '../apiClient';

const LoginPage = props => {

  const handleLogin = () => {
    const token = // get the token

      apiClient.login(token);
  }
}


// anotherComponent.js
const User = props => {
  useEffect(() => {
    apiClient.getUser()
  }, [])
}

---

如果您的api客户端不依赖于组件中的任何道具/状态，最好的方法是单独初始化它，然后只导入到需要使用它的文件中：

// apiClient.js

export const apiClient = new ApiClient();

// component.js 

import {apiClient} from '../apiClient';

如果需要在组件内部处理登录/注销，该组件在api客户端内部设置令牌，则可以添加

login

和

logout

方法，这些方法将在初始化客户端后调用。由于您的应用程序中只有一个客户端实例，这些更改（登录和注销）将在使用客户端的所有组件中生效：

// Client.js
class ApiClient {
  constructor() {
    // do intance init stuff if needed
    this.token = null;
  }

  login(token) {
    this.token = token;
  }

  logout() {
    this.token = null;
  }
}


// apiClient.js

export const apiClient = new ApiClient();

// component.js 

import { apiClient } from '../apiClient';

const LoginPage = props => {

  const handleLogin = () => {
    const token = // get the token

      apiClient.login(token);
  }
}


// anotherComponent.js
const User = props => {
  useEffect(() => {
    apiClient.getUser()
  }, [])
}

---

我的ApiClient有一个私有字段

令牌：string | null

，其中包含一个jwt令牌。在我的玩具应用程序中，我试图处理登录/注销操作，并在登录时使用字符串设置令牌字段，在注销时使用

null

。这是客户端和组件之间的依赖关系，也是我尝试将其放置在组件中的原因。这是一个坏主意，而且职责混杂吗？我应该只将令牌作为每个api方法的参数传递吗？我的ApicClient具有私有字段

token:string | null

，其中包含jwt令牌。在我的玩具应用程序中，我试图处理登录/注销操作，并在登录时使用字符串设置令牌字段，在注销时使用

null

。这是客户端和组件之间的依赖关系，也是我尝试将其放置在组件中的原因。这是一个坏主意，而且职责混杂吗？我是否应该将令牌作为每个api方法的参数传递？