React-i18next,初始化显示json键的问题

最新推荐文章于 2024-01-22 14:09:38 发布
最新推荐文章于 2024-01-22 14:09:38 发布
阅读量314 收藏 1
点赞数 1
分类专栏： i18 文章标签： javascript json react 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69927213/article/details/127965960
版权

一、问题的描述

每次刷新总那么一瞬间显示json键（home）当做字符串展示了，头疼…

二、正常的预期是什么？

刷新的那么一瞬间不要把i18n的json键当做字符串展示了，能正常的展示国际化语言

三、问题产生的原因分析

1.import { useTranslation } from “react-i18next”;

2.在hooks中使用 const { t } = useTranslation();

3.在dom中嵌入 {${t("home")}}

四、问题的解决方案

老铁们要给默认值啊，给默认值啊，给默认值啊！defaultValue

{${t("home", {defaultValue : "首页"})}}

酒沁
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Solved - 如何在react jsx中显示复杂的JSON字符串? How to display complex/nested json string in React jsx?
creepcheck的博客
05-02 235
如何在react jsx中显示复杂的JSON字符串? How to display complex/nested json string in React jsx?1. Handle the String to JSON in Backend？ Frontend？2. How to handle raw JSON string with \r\n in frontend in JSX? 1. Ha...
react-json-table:一个简单但React式的表react组件以显示JSON数据
05-08
react-json-table 一个简单但灵活的表react组件以显示JSON数据。 只需给它提供一系列对象即可。 var items = [ { name : 'Louise' , age : 27 , color : 'red' } , { name : 'Margaret' , age : 15 , color : 'blue' } , { name : 'Lisa' , age : 34 , color : 'yellow' } ] ; React . render ( < JsonTable xss=removed> , document . body ) ; 特征： 无依赖关系，格式为UMD。 可自定义的单元格内容，以您所需的方式显示数据。 点击标题，行或单元格的回调。 允许添加自定义列。 足够的className属性可让您以自己的
react-i18next
pauline_的博客
04-28 2032
因为react-i18next依赖 i18next ,所有需要同时安装i18next包 npm install react-i18next i18next -S 配置 在src下新建i18n文件夹，以存放国际化相关配置 i18n中分别新建三个文件： config.js：对 i18n 进行初始化操作及插件配置 en.json：英文语言配置文件 zh.json：中文语言配置文件 config.js： import i18n from "i18next"; import { initReact.
react i18n国际化配置
白小起
04-21 341
i18n
react-i18next-advanced:react-i18next与本地存储回退
05-09
标题“react-i18next-advanced:react-i18next与本地存储回退”表明我们将讨论如何在React应用中利用`react-i18next`实现高级的国际化功能，并结合本地存储作为网络故障时的回退方案。 首先，我们需要了解`react-i18...
cra-with-i18next
05-30
`cra-with-i18next`是一个基于Create React App（CRA）的项目，它演示了如何在React应用中集成i18next这一强大的国际化库。这个入门项目旨在教育开发者如何在实际项目中实现多语言支持，特别是在网络研讨会上作为...
前端项目-i18next-xhr-backend.zip
09-03
在实际项目中，配合i18next的其他插件和工具，如i18next-resource-store-backend（用于静态资源的本地存储）、react-i18next（针对React框架的集成），可以构建出完整的前端国际化解决方案。开发者需要注意的是，...
前端开源库-i18next-client
08-30
**前端开源库-i18next-client** 在前端开发中，多语言支持是一个常见的需求，而i18next是一个强大的国际化框架，专为JavaScript设计。它提供了丰富的功能，使得开发者能够轻松地实现应用的多语言切换。`i18next-...
使用i18nexti18n生态系统实现react国际化
08-13
1. **初始化i18next**: 在你的项目中创建一个配置文件（如`i18n.js`），初始化i18next并定义基本的语言设置： ```javascript import i18n from 'i18next'; import XHR from 'i18next-xhr-backend'; import Language...
i18next - start programming
晓强的技术博客
02-27 3978
I18Next - Start ProgrammingHome: http://i18next.com/I18Next - Start Programming Configure Usage Step 1 Download script Step 2 JavaScript in HTML page Step 3 Initialize I18N Step 4 Create JSON Step 5 U
前台国际化i18next使用
liubowin的专栏
05-06 7784
国际化文件： app_en.json app_zh.json customs_en.json customs_zh.json <script src="js/jquery.min.js" language="javascript" type="text/javascript"></script> <script src="js/i18next-1.8...
react使用i18next实现国际化
oops
06-08 461
react使用i18next实现国际化
Flutter 国际化，字符串来自于json文件
hexiekuaile的博客
01-20 474
一个Flutter StatelessWidget国际化简单示例，字符串来自于json文件。 在学习flutter国际化过程中，走了一些弯路，所以共享了这小项目。 关键还是要熟，谁来调用、调用什么、调用顺序。 代码在i18n.dart、main.dart中，代码有详细说明。 除此之外，还想实现个目标，即supportedLocales属性赋值通过json文件获得，但目前不知道从哪调用来实现，如有同...
react中如何使用i18n国际化
qq_36967515的博客
11-08 669
react中如何使用i18n国际化
深入解析 React-i18next：在 React 中实现国际化（一）
最新发布
tutututu12345678的博客
01-22 1248
是一个基于i18next的 React 绑定库，用于实现国际化。它提供了一种简单而强大的方式，让你的 React 应用轻松支持多语言。
react将后端返回的json显示成json样式
giiiig的博客
04-06 2565
先来看一下效果！ 办法挺简单的，就是用一个开源组件！ JSON数据展示神器:react-json-view(常用于后台网站) - xiaobe - 博客园 拿走不谢！ 1.先更新组件 npm install -D react-json-view 2.在导入组件 import ReactJson from 'react-json-view' 3.应用组件 var jsonStr = {"userName": "tiu","userAge": 26,"isMale": true}; c.
VSCode中i18n ally插件无效的几个原因
热门推荐
weixin_42568878的博客
03-15 1万+
VSCode中i18n ally插件无效的几个原因 在本次VUE3+Element-plus+vite+ts的一个项目中，想搞国际化，有些问题在网上也得不到解答，索性自己写一下 问题如题，原因可能有以下几点： 1.vue项目使用的i18n插件是vue3-i18n，而不是vue-i18n@next 那就两个都装上吧，npm install vue-i18n@next, 因为i18n ally插件它不认vue3-i18n，我本次也是先使用vue3-i18n写完了代码，才发现i18n ally插件无效，后面测试了
国际化 react-i18next useTranslation
gao000000的博客
10-27 3171
国际化 react-i18next useTranslation 引用 import { useTranslation } from ‘react-i18next’; 解构t const [t] = useTranslation(); 示例： <div onClick={toggleCollapsed} title={collapsed ? t('EXPAND_SIDEBAR') : t('COLLAPSED_SIDEBAR')} style={{ textAlign: 'right', paddin
react i18next与react-i18next如何配置
06-02
React i18next 是一个 React 的国际化插件，而 react-i18next 是它的封装版本。它们都需要进行配置，下面是配置步骤： 1. 安装依赖： ``` npm install i18next react-i18next ``` 2. 创建 i18n 配置文件： 在项目根目录下创建 `i18n.js` 文件，然后添加以下代码： ``` import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import translationEN from './locales/en/translation.json'; import translationZH from './locales/zh/translation.json'; // the translations const resources = { en: { translation: translationEN }, zh: { translation: translationZH } }; i18n .use(initReactI18next) // passes i18n down to react-i18next .init({ resources, lng: 'en', // default language fallbackLng: 'en', // fallback language interpolation: { escapeValue: false // react already safes from xss } }); export default i18n; ``` 其中，`translationEN` 和 `translationZH` 是存放翻译文件的目录，可以根据自己的需求进行修改。 3. 在组件中使用： 在需要使用国际化的组件中，可以通过以下方式进行使用： ``` import React from 'react'; import { useTranslation } from 'react-i18next'; function MyComponent() { const { t, i18n } = useTranslation(); return ( <div> <h1>{t('Welcome to React')}</h1> </div> ); } export default MyComponent; ``` 其中，`useTranslation` 是一个 React Hook，用于获取 `t` 和 `i18n` 两个对象。`t` 用于翻译文本，`i18n` 用于切换语言等操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值