Reactjs React + i18next + Trans + Prettier：Prettier 最终会在重新格式化 JSX 时 destruct 翻译

发布于01月10日

我有一个使用i18Next进行翻译的Reaction项目.我的Visual Studio代码也会运行得更漂亮，让我的代码看起来更漂亮:-)

在某些情况下，我需要使用<Trans>组件才能翻译包含HTML/JSX标记的文本

因此，这一点非常有效:

<Trans i18nKey="msg_new_user_register">
  New user - please <Link to="/register">register</Link>
</Trans>

有了这个在translation.json

"msg_new_user_register": "New user - please <1>register</1>",

但现在我需要将state属性添加到Link.完成此操作后，SPECTER将回击并将字符串重新格式化为

<Trans i18nKey="msg_new_user_register">
  New user - please{" "}
  <Link
    to="/register"
    state={
      location.state
        ? { from: { pathname: location.state.from.pathname } }
        : null
    }
  >
    register
  </Link>
</Trans>

即使我把所有的东西都写在一行里.在这种情况下，翻译只显示Link之前的文本，而Link本身被完全忽略.

有什么办法可以变通吗？在重新格式化时，是否可以明确要求SPECTER忽略JSX"一行程序"？

I18Next Trans能变得更宽容吗？

<Trans i18nKey="msg_new_user_register" defaults="New user - please <mylink>register</mylink>" components={{ mylink: ( <Link to="/register" state={ location.state ? { from: { pathname: location.state.from.pathname } } : null } > DUMMY </Link> ), }} />

Reactjs React + i18next + Trans + Prettier：Prettier 最终会在重新格式化 JSX 时 destruct 翻译

推荐答案

Reactjs相关问答推荐

如何实现黑暗模式 map ？

使用useEffect挂钩获取数据

客户端组件中服务器组件的两难境地

利用OVERPASS API端点计算某建筑的表面积

Next.js：提交表单时状态尚未就绪

使用`Link`包装`tr`标记会在Next.js中产生水合错误14

Google Firestore无法读取图像-react

梅X折线图无响应

我应该如何管理设置组件初始状态的复杂逻辑？

useEffect firebase 清理功能如何工作？

React-apexcharts 中的 Y 轴刻度不会动态更新符号

Material-UI 和 React Hook 表单不记录值

PWA：注册事件侦听器不会被触发

无法访问 usefocusEffect 中 const 的更新状态

当每个元素都可拖动时，移动设备上的滚动列表出现问题

如何解决在 react.js 中找不到模块错误

如何根据react 中的 map 功能一次只打开一个弹出窗口？

设置 Material UI 表格默认排序

React 检测哪些 props 在 useEffect 触发器上发生了变化

react 路由路由加载器不适用于嵌套组件