为什么React-I18Next的组件映射选项不是进行复杂翻译的首选格式?
这个问题涉及< trans>
来自react-i18next
的组件。
浏览React-I18Next并使用了多年后,我已经习惯了基于索引的节点格式。我承认,花了一些时间来缠绕我的头。
老实说,我遇到了一种替代格式,或者也许我应该说,在文档中并不是真正召集,因为它是使用使用
使用
prop和符号名称的映射到< trans> gt;
组件的首选方法。组件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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论