Remix 和 Next.js 中实现依赖注入

在 Remix 中实现依赖注入

在 Remix 中实现依赖注入需要使用到 context。下面是一个简单的示例：

1. 首先，在项目根目录下创建 context.js 文件：

import React from 'react';

const DependenciesContext = React.createContext({
   
   });

function useDependencies() {
   
   
  return React.useContext(DependenciesContext);
}

function DependenciesProvider({
   
    dependencies, children }) {
   
   
  return (
    <DependenciesContext.Provider value={
   
   dependencies}>
      {
   
   children}
    </DependenciesContext.Provider>
  );
}

export {
   
    DependenciesProvider, useDependencies };

这里创建了一个 DependenciesContext 上下文和一个 useDependencies 自定义 hook，以及一个名为 DependenciesProvider 的组件。

DependenciesProvider 组件是一个上下文的提供者，它使用 React.createContext 创建一个上下文对象。它还具有一个名为 dependencies 的 prop，该 prop 是用于传递所有依赖项的对象。

2. 接下来，在项目的根组件（例如 App.js）中使用 DependenciesProvider：

import React from 'react';
import {
   
    DependenciesProvider } from './context';

function App(