Javascript 将语言作为动态属性从父组件传递给React中的所有子体

我正在创建多语言应用程序。所以我想将语言属性传播给所有后代。因此，我可以在我的应用程序中为所有链接和路由添加语言前缀 我知道两种方法：

使用上下文，但不建议使用它，因为它是实验性的

使用redux store，但在这种情况下，我需要将每个组件连接到store 因此，我想知道哪种情况更可取，或者如果没有，那么可能还有另一种选择

附加说明
3.作为属性从组件传递到每个子级的所有深度，如下所示：

 <Component1 lang={props.lang} />
   <Component2 lang={props.lang} />
     <Component3 lang={props.lang} />
       <Component4 lang={props.lang} />
         ....
           <Component#N lang={props.lang} />

....

以下是我最适合我的想法和解决方案

处理国际化逻辑并不是组件真正的工作。在该级别生成链接将组件与应用程序耦合得太多，并使它们的重用变得复杂。我过去也做过，这是一场噩梦。甚至与翻译无关，当你从应用程序的不同位置生成指向某个视图的链接时，可以考虑更改该视图的URL。我认为这是糟糕的做法，不推荐比ToDo应用更大的东西。

现在我使用的是独立的服务，它根据应用程序配置/国际化动态生成链接和路由

该服务在网页包配置中以全局形式公开，比如LocationPointer。例如：

LocationPoiner.admin() 

将返回基于活动语言（/en/admin panel）指向管理视图的字符串

我不认为语言是一种可变状态。出于SEO和UX的原因，我想要的是基于可共享URL的国际化，这是唯一的真理来源 如果您在SPA上，并通过单击按钮等更改语言，则整个应用程序将被迫完全刷新

在页面加载过程中，我检测语言，将其值保存在某个地方，并提取正确的翻译

注意-我的后端也使用国际化，因此当用户更改语言时，必须再次执行一些请求以显示正确的数据这不仅仅是刷新前端组件。值得记住。当你的应用程序增长时，它可能也会根据国际化程度以不同的消息/数据响应

我的拉式前端翻译存储在另一个服务中，并通过返回翻译字符串的Web包作为_u（）公开为全局翻译

因此，如果我想在React组件中添加链接，我将执行以下操作：

<Link to={LocationPointer.admin()}>{__('Admin')}</Link>

{{{（'Admin'）}

---

当您同时在一个页面上使用多种语言时，将语言作为道具传递对我来说是有意义的。否则，在我看来，这只会造成混乱

通常，语言代码放在url中，因为这也用于SEO目的，使其更易于管理。然后，您可以将语言代码作为参数传播到组件中，也可以使用

props

。根组件将从某处（可能从url）获取语言，并通过

props

将其传递给children@Fawaz这正是我想要的want@Fawaz但是，如果有很多层次的嵌套组件，那么我必须将

语言代码

作为属性从一个组件传递到另一个组件。我想避免it@TarasYaremkiv这是不利的一面，需要你一路传递下去。您可以使用一些速记来加快速度，如

，将所有道具传递给子组件，但这是不可避免的。