在Reactjs中读取json文件的方式与我在Angular中所做的类似？

Question

我的 Angular 项目的资产文件夹中有一个 json 文件。我用它来存储通用工具提示和标签，因此我不必在 HTML 代码中对它们进行硬编码。首先，我将展示如何在我的应用程序中读取此 json 文件。

我里面有什么例子：

"Tooltips": {
    "Editar": "Editar",
    "Eliminar": "Eliminar",
    "Ver": "Ver",
    "Footer": {
      "Facebook": "Seguinos en Facebook",
      "Twitter": "Seguinos en X",
      "Instagram": "Seguinos en Instagram",
      "Linkedin": "Seguinos en Linkedin",
      "YouTube": "Seguinos en YouTube"
    }
  }

我有一个专门读取这个json文件的服务：

@Injectable()
export class ConfigService {
  private _tooltips: ITooltips
  constructor(private http: HttpClient) {
  }

  readData() {
    const promise = this.http
      .get('assets/config.json', { responseType: 'text' }).toPromise();

    promise.then(data => {
      const config = parseJson(data)
      this._tooltips = config['Tooltips']
    
    })

    return promise
  }

 public get tooltips(): ITooltips {
    return this._tooltips
  }

interface ITooltips {
  Editar: string,
  Ver: string,
  Eliminar: string,

  Footer: {
    Facebook: string,
    Twitter: string,
    Instagram: string,
    Linkedin: string,
    YouTube: string
  }
}

“parseJson”指的是这个方法，它使用了 strip-json-comments 库：

export function parseJson(jsonText: string): any {
  const stripedJson = stripJsonComments(jsonText)
  const json = JSON.parse(stripedJson)

  return json
}

app.module.ts 内的代码：

export function initializeApp(config: ConfigService) {
  return () => config.readData()
}

@NgModule({
  declarations: [
  ],
  imports: [
  ],

  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [ConfigService],
      multi: true,
    }

  ],
  bootstrap: [AppComponent]
})

所有这些使得我可以将 ConfigService 服务注入到我的任何组件中并读取 config.json 文件，在我看来这非常方便。

现在，我即将在工作中启动一个新的 Reactjs 项目。我在 Reactjs 方面几乎没有经验，我们首先要进行大量培训，但我正在考虑我的 Angular 应用程序的这个特定部分。

我想将这段代码从 Angular“翻译”为 Reactjs。我希望能够将 json 文件映射到类似于 Angular 服务的一个或多个接口，这样我就可以注入它并从 Reactjs 应用程序中的任何位置读取文件。 我该怎么做？您推荐哪些图书馆？

Answer 1

为什么不使用上下文文件而不是 json 这是一个更好的方法：

首先创建一个名为ToolTips.js的文件

const Tooltips = {
    Editar: "Editar",
    Eliminar: "Eliminar",
    Ver: "Ver",
    Footer: {
        Facebook: "Seguinos en Facebook",
        Twitter: "Seguinos en X",
        Instagram: "Seguinos en Instagram",
        Linkedin: "Seguinos en Linkedin",
        YouTube: "Seguinos en YouTube"
    }
}

export { Tooltips }

然后创建工具提示上下文文件，如下所示：

import React, { createContext, useContext } from 'react';
import { ToolTips } from '../Constants/ToolTips';

const ToolTipsContext = createContext();

export const ToolTipsProvider = ({ children }) => {
  return (
    <ToolTipsContext.Provider value={{ ToolTips }}>
      {children}
    </ToolTipsContext.Provider>
  );
};

export const useToolTips = () => useContext(ToolTipsContext);

然后在应用程序中使用上下文，如下所示：

import React from 'react';
import { ToolTipsProvider } from './context/ToolTipsContext';
import TooltipComponent from './components/TooltipComponent';

const App = () => {
  return (
    <ToolTipsProvider>
      <div>
        <h1>My App</h1>
        <TooltipComponent />
      </div>
    </ToolTipsProvider>
  );
};

export default App;

然后你可以在你的组件中使用它，如下所示：

import React from 'react';
import { useToolTips } from '../context/ToolTipsContext';

const anyComponent= () => {
  const { Tooltips } = useToolTips();

  return (
    <div>
      <h2>Tooltips Example</h2>
      <ul>
        <li>{Tooltips.Editar}</li>
        <li>{Tooltips.Eliminar}</li>
        <li>{Tooltips.Ver}</li>
        <h3>Footer</h3>
        <ul>
          <li>{Tooltips.Footer.Facebook}</li>
          <li>{Tooltips.Footer.Twitter}</li>
          <li>{Tooltips.Footer.Instagram}</li>
          <li>{Tooltips.Footer.Linkedin}</li>
          <li>{Tooltips.Footer.YouTube}</li>
        </ul>
      </ul>
    </div>
  );
};

export default anyComponent;