我们如何使用api调用来加载翻译，而不是在静态json中定义它们？在React-i18next中如何做到这一点？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

实现全球化：深入理解国际化框架的构建

优点覆盖面广：由于所有的翻译都嵌入在代码中，因此我们可以使用多种语言，而不必担心外部依赖或缺失翻译。无网络调用：翻译直接从代码中获取，无需任何网络开销或从外部源获取翻译相关的延迟。...这通常会使用像 Jackson 或 GSON 这样的库。在本例中，我们将使用 Jackson。...以 Facebook 为例，在 News Feed 中，我们会看到这里使用了自定义的字符串来表示每篇文章的“Likes”信息。...在这种情况下，需要进行一些自定义。动词“like”和“likes”是根据喜欢文章的人数来确定的。如何做到这一点呢？...“reacted”可用于用户以爱心、关注或愤怒等图标对文章做出反应，而不能是表示喜欢的图标。实现此类动态内容的一种方法是在配置文件中使用占位符，并在运行时根据上下文替换它们。

9371 0

网络本地化的痛点和解决方案

你甚至可以更进一步，为每种语言创建不同的文件夹，然后有多个 JSON 文件，这样你可以将键拆分到不同的文件中，更好地组织。但确保文件中没有缺失的键！使用键有了键和值后，你可以在代码中使用它们。...以下是我个人经历的一些痛点以及我尝试解决它们的方法。难以找到准确的词汇在小团队中，这还是可以管理的，通常是前端开发人员处理翻译，当有变化时更新键和值也不是什么大问题。...存储翻译将所有翻译存储在 JSON 文件中易于管理，但如果你希望对翻译有更好的概览呢？...几种可能的方法：A）全部在前端：静态文本在你的代码中，每次后端显示文本时，可以传递一个键，这样前端将负责翻译。B）全部在后端：前端有键但不知道如何翻译。...匹配键和值的定义文件都存储在后端，需要时发送给前端，可以在应用程序启动时或按需发送。C）全部在外部服务：类似于前一种方法，但不是在你自己的后端应用中处理翻译，而是使用外部服务来处理所有事务。

3681 0

您找到你想要的搜索结果了吗？

是的

没有找到

带你认识 flask ajax 异步请求

对于允许访问第三方服务的密钥或密码等敏感信息，这一点尤为重要。你绝对不想在代码中明确写出它们。 Microsoft Translator API是一个接受HTTP请求的Web服务。...所以让我们将其安装到虚拟环境中： (venv) $ pip install requests 在下面，你可以看到我使用Microsoft Translator API编写翻译文本的功能。...在此上下文中运行的JavaScript代码可以更改DOM以触发页面中的更改我们首先需要讨论的是，在浏览器中运行的JavaScript代码如何获取需要发送到服务器中运行的翻译函数的三个参数。...对于加载器，我将使用一个小的动画GIF，它已添加到Flask为静态文件保留的app/static目录中。...在成功回调中，我所需要做的就是使用翻译后的文本调用$(destElem).text()，该文本在字典中text键下。

5.3K2 0

前端国际化：语言包篇

简单来说，国际化是创建一个可以轻易本地化的产品的过程，而本地化是将产品调整以适应特定地区的过程。两者在实际产品中的边界可能比没有那么清晰，而是相辅相成，通常在大的国际化基座上进一步进行本地化。...当然还有其他手段可以实现，但在本篇文章中我们统一约定使用 .tr 作为语言包文件。...小程序端不支持动态执行代码, 所以无法使用动态导入，解决办法就是作为静态资源提取出去，托管到静态资源服务器或 CDN中，远程加载: 以 Taro 配置为例 // Webpack 5 const generator...{ "i18n-ally.enabledFrameworks": ["react-i18next"] } 自定义语言包检查目录。...", "**/i18n"] } 语言包配置我们上文使用的是 .tr 扩展名， i18n ally 并不能识别它，我们通过下面的配置来告诉它如何处理 tr 文件： // .vscode/setting.json

2.6K3 0

AI辅助开发实践：前端国际化(i18n)在多语言供应链平台中的完整方案

在本项目中，我们为一家跨国超商企业开发多语言供应链平台，需要支持中英文切换，并预留扩展机制以便未来增加西班牙语、阿拉伯语等支持。...AI协作场景：我们使用ChatGPT进行技术方案咨询，输入项目约束条件（React技术栈、企业级应用、需要动态加载），获得了带有优缺点对比的详细分析表格，加速了决策过程。...2.2 整体架构设计我们设计了前后端协同的国际化架构，前端负责界面渲染和语言切换，后端Node.js服务提供国际化API支持和动态内容处理。...参数解析：lng设置默认语言，fallbackLng确保在缺少翻译时使用备用语言，detection配置语言检测顺序（本地存储>浏览器语言>HTML标签）。...未来，我们将继续探索AI在前端开发中的更多可能性，进一步提升开发效率与用户体验。

7882 0

Google Earth Engine（GEE）——图表概述（记载图表库）

但是您可以在一次调用中列出您需要的所有软件包，因此无需进行单独调用。如果您使用的是 ChartWrapper，则必须显式加载您需要的所有包，而不是依赖 ChartWrapper 自动为您加载它们。...您可能希望这样做而不是使用默认行为，这可能会导致您的用户的服务偶尔受到限制。在此处了解如何设置您自己的密钥以使用“Google Maps JavaScript API”服务：获取密钥/身份验证。...有三种方法可以做到这一点。...请注意，对于所有这些方式，您都需要提供函数定义，而不是调用函数。您提供的函数定义可以是命名函数（因此您只需提供其名称）或匿名函数。当包完成加载时，将不带参数调用此回调函数。...在调用回调之前，加载器还将等待文档完成加载。如果要绘制多个图表，可以使用注册多个回调函数setOnLoadCallback，也可以将它们合并为一个函数。

8581 0

全面解析 i18n：从概念到实践，再到底层原理

一个完整的 i18n 方案远不止翻译文字，它涵盖多个维度的文化与区域差异： UI 文本/消息最常见的部分，如“提交”、“取消”、“加载中…”等界面文案。...所有翻译内容集中存放在独立的资源文件中，例如： // en.json { "greeting": "Hello World" } // zh-CN.json { "greeting": "你好，世界"...动态替换：运行时按需加载并渲染在渲染阶段，程序根据当前语言环境加载对应的资源文件，并通过键查找翻译值。...Composition API 中，useI18n() 返回响应式的 locale 和翻译函数 t，便于状态管理。...翻译文件外置将 JSON 文件放在 public/locales 等目录，而非硬编码在 JS 中，便于：非技术人员（如翻译团队）编辑自动化工具提取与同步 7.

6932 0

分享 10 个有用的 Vue.js 自定义 Hook

我认为有了组合 API，Vue.js 只会增长得更多。在本文中，我将向分享 10 个可以使用 Vue.js 制作的有用的自定义钩hook。 01、使用窗口调整大小这是一个基本的hook。...我知道我们有很多方法可以做到这一点。你可以在此功能中尝试最适合你的方法。至于如何使用，调用即可。...在此hook中，我将使用 useWindowResize 构建相同的内容，但它返回设备名称而不是宽度和高度值。这是这个hook的代码。...Vue 为我们提供了一个有用的组合 API onUnmounted ，它可以帮助我们在卸载hook之前运行我们的操作。在我构建的每个钩子中，我总是删除 onUnmounted 中的事件侦听器。...最后，在我的文章中，我与您分享了10 个有用的 Vue 自定义hook，我希望它们对您有所帮助。 Vue.js 是一个很棒的框架，我希望你可以用它构建更多很棒的东西。

6943 1

多语言站点react前端框架i18next

在 react 中，其实已经有人封装了多语言的扩展库，我们只需要安装它就可以在我们的 react 项目中实现网站的多语言切换。下面我们简单介绍下如何使用它。...，一般我们都是从数据库中获取，这里为了演示，我们直接写在了配置文件中。...接下来，我们介绍下如何在项目中使用它。...，一个是中文，一个是英文，点击中文，显示中文内容，点击英文，显示英文内容，这里我们主要就是通过调用i18n.changeLanguage这个函数来实现对应语言的转换，我们需要翻译的短语使t函数进行包裹。.../public/locales/en/translation.json'; import translationDE from '..

3.3K2 0

Android插件化原理解析——广播的管理

>标签（也即静态注册的广播）的时候保存相应的信息；而Apk的解析过程是在PMS中进行的，因此静态注册广播的信息存储在PMS中。...中的标签下面的内容，我们可以选择手动解析xml文件；这里我们选择使用系统的 PackageParser 帮助解析，这种方式在之前的 [插件加载过程][] 中也用到过，如果忘记了可以温习一下...知道这一点之后，代码就比较简单了；使用反射调用相应的隐藏接口，并且在必要的时候构造相应参数的方式我们在插件化系列文章中已经讲述过很多，相信读者已经熟练，这里就不赘述，直接贴代码： private static...；这一点在插件加载机制已有讲述，不啰嗦了。...至于插件中的动态广播如何实现插件化，这一点交给读者自行完成，希望你在解决这个问题的过程中能够加深对于插件方案的理解 ^ ^ 小节本文我们介绍了BroadcastReceiver组件的插件化方式，可以看到

9512 0

2020 年你应该知道的 React 库

在您引入路由以前，您可以先尝试 React 的条件渲染，它虽然不是路由的合理替代，但是小型应用中以及足够用了。...但是，有时候不仅需要提供复杂的异步请求，还需要它们具有更强大的功能，而且只是一个轻量级的库。我推荐的这些库之一称为 axios。当您的应用程序增大时，可以使用它来代替本地获取 API。...React 应用程序中，TypeScript 为整个应用程序增加了类型安全性，而不是使用 React PropTypes。...即使你没有刻意遵循这些样式指南，但是读一读它们，在 React 中获得常见代码样式的要点是有意义的。第二种方法是使用 linter，比如 ESLint。...REACT VR/AR 实话说，我们很有可能用 React 深入虚拟现实或者增强现实中，我没有使用过这些库中的任何一个，但是它们是我在谈到 React AR/VR 时从大脑闪过的就是： React 360

18.7K4 0

我从 Vuejs 中学到了什么

在 Vue 的源码中你可以搜索到名为 initCustomFormatter 的函数，这个函数就是用来在开发环境下初始化自定义 formatter 的，以 chrome 为例我们可以打开 devtool...答案是当然不需要，那如何做到这一点呢？这就不得不提到本节的主角 Tree-Shaking。那什么是 Tree-Shaking 呢？...实际上 Vue 的构建产物除了有环境上的区分之外，还会根据使用场景的不同而输出其他形式的产物，这一节我们将讨论这些产物的用途以及在构建阶段如何输出这些产物。...__: JSON.stringify(true) // 开启特性 }) 最后再来详细解释一下 __VUE_OPTIONS_API__ 开关是干嘛用的，在 Vue2 中我们编写的组件叫做组件选项 API...，但是对于明确知道自己不会使用选项 API 的用户来说，它们就可以选择使用 __VUE_OPTIONS_API__ 开关来关闭该特性，这样在打包的时候 Vue 的这部分代码就不会包含在最终的资源中，从而减小资源体积

8213 0

我从 Vuejs 中学到了什么

在 Vue 的源码中你可以搜索到名为 initCustomFormatter 的函数，这个函数就是用来在开发环境下初始化自定义 formatter 的，以 chrome 为例我们可以打开 devtool...答案是当然不需要，那如何做到这一点呢？这就不得不提到本节的主角 Tree-Shaking。那什么是 Tree-Shaking 呢？...实际上 Vue 的构建产物除了有环境上的区分之外，还会根据使用场景的不同而输出其他形式的产物，这一节我们将讨论这些产物的用途以及在构建阶段如何输出这些产物。...__: JSON.stringify(true) // 开启特性 }) 最后再来详细解释一下 __VUE_OPTIONS_API__ 开关是干嘛用的，在 Vue2 中我们编写的组件叫做组件选项 API：...，但是对于明确知道自己不会使用选项 API 的用户来说，它们就可以选择使用 __VUE_OPTIONS_API__ 开关来关闭该特性，这样在打包的时候 Vue 的这部分代码就不会包含在最终的资源中，从而减小资源体积

1.2K1 0

红队技巧：绕过Sysmon检测

启动Ghidra并启动sysmon64.exe，我们可以看到它使用ReportEventWWindows API调用来报告事件。 ?...现在我们知道了，可以hook 该调用并从那里阻止事件……然鹅这有什么卵用呢？我们仍然需要管理员权限来做到这一点，我认为我们可以更好地利用它们。...深入调用链并查看ReportEventWADVAPI32.dll，我们可以看到它实质上EtwEventWriteTransfer是在NTDLL.dll中定义的包装器。 ?...如果您在下面看，您将看到我能够启动Powershell提示而不会触发任何sysmon事件。因此，现在我们可以使用来开始编写PoC代码了。...，所以我将这个驱动程序嵌入到可执行文件中，因此当需要使用它时，它将被解压缩，然后KDU会将其加载到内核中。

1.6K2 0

2023 React 生态系统，以及我的一些吐槽……

，但我们试图在 create-react-app 的精神下提供一些工具，它们可以抽象化设置过程、处理最常见的用例，并包含一些有用的实用工具，让用户可以简化他们的应用程序代码。...UI 层一起使用 API 端点是预先定义的，包括如何从参数生成查询参数和将响应转换为缓存的方式 RTK Query 还可以生成封装整个数据获取过程的 React hooks，为组件提供数据和 isLoading...由于大约有 30 个独特的表单，很快就明显发现，我们可以通过标准化不仅是输入组件，还有数据在表单中的流动方式来获益。为什么不使用 Redux-Form？...不是因为我认为 React 在实现表单方面采取了错误的方法，而是因为在使用 React 时，表单是最具挑战性的问题。许多框架都有自己的解决方案来处理表单。AngularJS 在这方面做得非常好。...对于 Headless UI 组件，我们要做到第一件事，就是分析和抽离组件的状态以及交互逻辑。

3.7K3 0

不用任何框架开发 Web 应用程序，可能吗？

需要学习如何使用它们（它们能做或不能做什么、它们的概念、API、生态系统、工具），包括了解在新版本中可能发生的变化。如果你选择的是当前最流行的框架，这可能会容易些，但你不可能了解一个框架的方方面面。...要做到这一点，你需要从（客户端或服务器）应用程序上下文中选择 DOM 对象（windowdocument 和类型，如 Node、HTMLElement、NodeFilter），而不是直接获取。...为了恢复交互性，你需要一些“补水”步骤，也就是注入脚本，让它们在客户端执行。框架因其普适性很难做到这一点。...就拿影子 DOM 来说，它们不断尝试改进算法，希望能够以最聪明的方式做到这一点，但如果我们把问题缩小到应用程序层面，就会变得简单很多。...当然，在普通的服务器应用程序中做到这一点也意味着需要将 JS 脚本注入到响应消息中（通过引用或内联，具体取决于你想要怎样的“渐进”程度，比如将 Web 组件所需的代码嵌入到 HTML 响应中，让它们在客户端执行

8902 0

Express4.x API (四)：Router (译)

Express4.x API 译文系列文章已经完成了Express4.x API中的Requst和Response对象的文档翻译。...，它们不是由加载的应用程序或路由器继承的。...因此，定义在路由上的参数回调只有通过router定义的路由参数才会触发一个回调参数将被称为一次请求响应周期，即使参数在多个路径中匹配，如下面的栗子所示： router.param('id',function...下面展示了一个简单的示例和用例：中间件就像是管道，请求在第一个中间件函数定义时开始，并为它们"向下"匹配每一条路径处理中间件堆栈处理。...NOTE:虽然这些中间件功能是通过特定路由器添加的,当他们运行时由他们连接到的路径来定义(而不是路由)。因此，如果路由器的路由匹配，则通过一个路由器添加的中间件可以运行其他路由器。

2.5K10 0

10个有用的自定义钩子vue.js

随着 composition API 的出现，Vue 会有更大的发展空间。在这篇文章中，我将给大家介绍 10 个有用的自定义钩子，让大家的代码更加优美好看。...(newValue)); } } return [ value, setItem(storage) ] } 复制代码在我的代码中，我使用 JSON.parse **...要做到这一点，我们需要一些东西，让我们知道用户是否在关注。这是一个自定义的钩子。...特别是对于移动设备，几乎所有运行在移动设备上的应用程序都在其用户界面中应用了load more。要做到这一点，我们需要检测用户滚动到列表底部，并为该事件触发一个回调。...要做到这一点，我们需要使用 setInterval 方法。在这里，我们需要检查定时器的暂停状态。如果定时器没有暂停，我们只需要调用一个回调函数，该函数由用户作为参数传递。

6602 0

Webpack 深入浅出之公司级分享总结(内附完整ppt)

完成模块编译在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被编译后的最终内容及它们之间的依赖关系输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk,...所以我们可以调用任意 Node.js 自带的 API ，或者安装第三方模块进行调用调用Webpack的Api //获取用户为 Loader 传入的 options const loaderUtils...this.callback 返回内容时，该 Loader 必须返回 undefined, //以让 Webpack 知道该 Loader 返回的结果在 this.callback 中，而不是...对象挂载的 webpack 事件钩子，钩子的回调中能拿到当前编译的 compilation 对象，如果是异步编译插件的话可以拿到回调 callback 完成自定义子编译流程并处理 complition...编译对象也提供了很多关键点回调供插件做自定义处理时选择使用。

2.7K3 0

10个有用的自定义钩子vue.js

随着 composition API 的出现，Vue 只会有更大的发展。在这篇文章中，我将介绍 10 个有用的自定义钩子，让我们的代码更加好看。...为了实现这个钩子，我们需要为事件 "在线"和 "离线"添加事件监听器。在事件中，我们只是调用一个回调函数，参数为网络状态。下面是我的代码。...要做到这一点，我们需要一些东西，让我们知道用户是否在关注。这是一个自定义的钩子。...特别是对于移动设备，几乎所有运行在移动设备上的应用程序都在其用户界面中应用了load more。要做到这一点，我们需要检测用户滚动到列表底部，并为该事件触发一个回调。...要做到这一点，我们需要使用 setInterval 方法。在这里，我们需要检查定时器的暂停状态。如果定时器没有暂停，我们只需要调用一个回调函数，该函数由用户作为参数传递。

5962 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭