为什么React-I18Next的组件映射选项不是进行复杂翻译的首选格式?

发布于 2025-01-31 01:25:28 字数 1571 浏览 5 评论 0原文

这个问题涉及< trans>来自react-i18next的组件。

浏览React-I18Next并使用了多年后,我已经习惯了基于索引的节点格式。我承认,花了一些时间来缠绕我的头。

老实说,我遇到了一种替代格式,或者也许我应该说,在文档中并不是真正召集,因为它是使用使用使用< trans> gt;组件的首选方法。组件 prop和符号名称的映射到react.reaeactnode

我觉得这种格式更加直观,所以我想更多地了解为什么这在文档中没有成为最前沿?它是否更像是一种较新的格式,因此使每个人都开心,将原始方法保留为记录的方法?

由于比较类似:

"HELLO_WORLD": <0>The cow<1>well this cow is inside</1>and now im back out <3>just for fun></3>end</0>

and used like

<Trans i18nKey="HELLO_WORLD">
  <h1>
    The cow (but honestly it doesnt matter what i put here since it gets replaced)
    <h2>well this is inside</h2>
    now we out
    <h3>funzies</h3>
  </h1>
</Trans>

对于没有使用trans组件的任何人,这就像“ WTF,这一定是错别字。我们为什么从节点1到3跳过?不要让我开始嵌套节点索引重置位置。

比较:

"HELLO_WORLD": <WRAPPER>The cow<INNER>well this cow is inside</INNER>and now im back out <SIBLING>just for fun></SIBLING>end</WRAPPER>

and used like (just an example btw)

const Wrapper = (props) => <h1>{props.children}</h1>;
const Inner = (props) => <h2>{props.children}</h2>;
const Sibling = (props) => <h3>{props.children}</h3>;

<Trans
 i18nKey="HELLO_WORLD"
 components={{
   WRAPPER: <Wrapper />,
   INNER: <Inner />,
   SIBLING: <Sibling />
 }}
/>

只是好奇是否有一些边缘案例或我不知道一个比另一个更有利的东西。

This question pertains to the <Trans> component from react-i18next.

Browsing around react-i18next, and having used it for years, I've been so used to using the index based node format. I will admit, it took some time to wrap my head around.

I came across an alternative format that is honestly not super well documented or maybe I should say, not really called out in the documentation as the preferred way of utilizing the <Trans> component using the components prop and a mapping of symbol name to React.ReactNode.

I feel like this format is way more intuitive, so I would like to learn a bit more why has this not been brought to the forefront in the documentation? Is it more of a newer format and as a result to keep everyone happy, leave the original approach as the documented one?

Since comparing things like:

"HELLO_WORLD": <0>The cow<1>well this cow is inside</1>and now im back out <3>just for fun></3>end</0>

and used like

<Trans i18nKey="HELLO_WORLD">
  <h1>
    The cow (but honestly it doesnt matter what i put here since it gets replaced)
    <h2>well this is inside</h2>
    now we out
    <h3>funzies</h3>
  </h1>
</Trans>

to anyone who hasnt used the Trans component this is like a "wtf, this must be a typo. Why did we skip from node 1 to 3? Where did 2 go?". And dont get me started on nesting where the node indices reset.

Comparing that to:

"HELLO_WORLD": <WRAPPER>The cow<INNER>well this cow is inside</INNER>and now im back out <SIBLING>just for fun></SIBLING>end</WRAPPER>

and used like (just an example btw)

const Wrapper = (props) => <h1>{props.children}</h1>;
const Inner = (props) => <h2>{props.children}</h2>;
const Sibling = (props) => <h3>{props.children}</h3>;

<Trans
 i18nKey="HELLO_WORLD"
 components={{
   WRAPPER: <Wrapper />,
   INNER: <Inner />,
   SIBLING: <Sibling />
 }}
/>

Just curious if theres some edge cases or things I'm not aware of where one is more advantageous over the other.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文