html移动端即时翻译插件,React框架实现移动页面翻译是一种什么体验？

最新推荐文章于 2023-04-11 13:35:52 发布
最新推荐文章于 2023-04-11 13:35:52 发布
阅读量576 收藏 1
点赞数
文章标签： html移动端即时翻译插件

单词翻译常见于APP中，那么在网页中对于一段中英混杂的内容怎么准确的做到单词的翻译呢？

我要渲染的内容是一段段的html，用react渲染一段html内容是没有什么难度，使用dangerouslySetInnerHTML 即可。但是可以做到将内容中的英文单词翻译出来，是怎么实现的呢？一起来看一下吧。

效果

bV5zbS?w=1080&h=1920

事情是这样的...

我前端是做内容展示，后台将Html格式的内容传递到前端，前端原生元素的dangerouslySetInnerHTML 属性去解析html内容，就可以使用react框架渲染html了

bV5zcw?w=581&h=135

仔细看，这个属性用的是{ { }}2个括号而不是1个括号。原因是：第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对。它接收的内容是html的，很容易收到XSS攻击，所以这个属性有了dangerous这个单词...

过程

重组英文单词

后台传给我的一段一段的内容是这样的：

最低0.47元/天 解锁文章
Creamy络
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VSCode翻译插件、react项目国际化开发方法、umi项目做国际化开发
zl的博客
08-11 1075
du-i18n插件为本地开发工作提供敏捷的开发模式，提供一键扫描中文、提取文案、文案回显、在线翻译、文案上传、拉取线上文案、翻译漏检、切换语言以及分析统计等功能。i18n技术栈，兼容vue2，vue3，react，js/ts，同时满足不同阶段多语言发展的开发模式，无论是本地保存文案模式，还是线上保存文案模式皆可适用。1、功能支持文案回显支持一键扫描中文支持中文提取到指定文件支持本地或远程在线翻译支持文案上传到远程服务支持拉取线上文案，定位文案的代码位置支持翻译漏检功能。
react-translator-component：用于开发多语言项目的React语言翻译模块
02-04
React翻译器组件 用于开发多语言项目的React语言翻译模块。 入门 使用NPM安装： $ npm install react-translator-component 用法 现场演示 相当简单易用； 进行翻译器配置。 在T(text)函数中包括文本内容。 最后，在<Translator> /* APP */ </Translator>调用您的应用程序。 // App.js import React from ' react ' ; import { Translator , T , TF , LanguageList , Config } from ' react-trans
React 支持多语言翻译国际化 -- i18next
乐闻世界
11-06 1063
如果我们的项目需要更多的流量，支持其他国家的语言是必不可少的。对于React项目我们该如何实现项目多语言，让工程走向国际化，本文将介绍目前最通用的解决方案 i18next。准确是说 i18n并不仅仅是为 React 而生，为了支持React项目，我们还需要引入 react-i18n ext插件。
jquery/vue/react前端多语言国际化翻译方案指南
Tz
09-02 1653
本文章共3470字，预计阅读时间5-10分钟。 国际化-前言 每个开发者能希望编写的程序可以让全世界的用户使用，它要求从产品中抽离所有地域语言，国家/地区和文化相关的元素。换种说法，应用程序的功能和代码设计时考虑在不同地区运行的需要，其代码适应不同区域要求。开发这样的的过程，就称为国际化（ internationalization），简称i18n。 i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。在资讯领域，国际化(i18.
react-NowUI是一款基于React的移动端UI组件框架
08-14
NowUI 是一个专为React开发设计的移动端UI组件库，旨在提供一套完整、美观且响应式的用户界面元素，以加速移动应用的开发过程。这款框架借鉴了最新的设计趋势，如扁平化设计和Material Design风格，同时保持了高度的...
React移动端框架,自适应
11-16
React移动端框架的使用可以极大地提升开发效率，提供良好的用户体验。本项目结合了多个技术栈，包括umi、antd-pro、vant、tailwindcss、postcss-px-to-viewport以及TypeScript，形成了一套强大的移动开发解决方案。 ...
react-mobile:基于react的移动端H5框架
05-08
基于react + webpack 的单页面移动端应用,不依靠create-react-app脚手架 项目结构 |-- build webpack配置文件夹 |-- utils.js 所用方法 |-- webpack.config.js 公共配置 |-- webpack.dev.js 开发配置 |-- ...
一个基于 umi 的移动 React 框架
06-12
"一个基于 umi 的移动 React 框架"就是这样的解决方案，它将umi框架与React结合，为开发者提供了强大的功能和高效的开发体验，特别是针对移动端应用。 【描述】：“一个基于 umi 的移动 React 框架。” umi是阿里...
react-在React项目中添加复杂翻译i18n的简单方法
08-14
在React项目中添加复杂翻译(i18n)的简单方法
react-react中文文档翻译
08-14
react docs in Chinese | react中文文档翻译
react-translate:无需任何麻烦，也无需任何设置即可翻译您的React应用！
03-18
React翻译 无需任何麻烦，也无需任何设置即可翻译您的React应用！ 特征 翻译功能 翻译组件 允许嵌套翻译 基于计数的单数，复数和零 轻量级（〜3KB） 使用TypeScript构建 约99％的代码覆盖率 正在安装 npm install @federico.moretti/react-translate # or yarn add @federico.moretti/react-translate 例子 基本用法： import React from 'react' ; import ReactDOM from 'react-dom' ; import { TranslateProvider , useTranslate , } from '@federico.moretti/react-translate' ; const translations = { pear
javascript翻译机(翻译htmlCSS代码)v3.01绿色版
08-01
javascript翻译机是一款好用的javascript翻译软件，该软件界面简洁，操作方便，体积小巧，功能强大，使用后可以帮助翻译html CSS代码，非常适合编程人员使用，帮助了解难懂的js代码，是他们的好帮手。 javascript翻译机功能： 1、可以把英文代码翻译为中文，也可以把写的中文代码翻译为标准英文代码。 2、实现了不懂英文但是看得懂英文源码，不懂英文但是写得出英文源码。 3、目前
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass
最新发布
03-06
该架构已解决大部分坑，主要用于react@18.2.0移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
开发过程中，因为前端react项目国际化太麻烦，我写了这款vscode前端国际化插件。
fudebao的博客
04-11 959
相信很多同学都不愿意做国际化，但是公司要求必须要做，只能很痛苦的去做。但是有了这款插件，开发的时候就不用关注国际化了，可以在开发完一个功能后，一键国际化。
React国际化——多语言切换
zhl999999999的博客
11-10 7466
1.安装react-intl-universal：npm install react-intl-universal --save 2.配置语言包，json文件根据需要支持几种语言决定（将新建的语言包json文件放置于项目根目录的./public/locales下）：              3.引入react-intl-universal：import intl from "react...
划词翻译简单实现
maxiaovivi的博客
03-25 146
环境：archlinux ，其余linux系统类似。
JavaScript实现划词翻译
极客神殿
08-17 2898
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetWord.aspx.cs" Inherits="Pro.GetWord" %> <!DOCTYPE html> <html> <head runat="server"> <meta http-equiv="Con...
Vue、React、Angular 三者的移动端支持框架是什么？
09-17
React Native是一个用于构建原生移动应用的框架，它允许开发者使用React和JavaScript来编写跨平台的移动应用，通过使用原生组件和JavaScript来构建用户界面，从而实现高性能和原生应用的体验。 对于Angular来说，它...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值