javascript - 将语言作为动态属性从父组件传递给 React 中的所有后代

Question

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

1. 使用上下文，但不建议使用它，因为它是实验性的。
2. 使用 redux 存储，但在这种情况下，我需要连接每个组件来存储。

所以我想知道哪种情况更可取，或者如果这些都不是，那么可能还有另一种选择。

附注
3. 作为属性从组件传递给所有级别深度的每个子级，如下所示:

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

Answer 1

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

1. 处理国际化逻辑实际上并不是组件的工作。在该级别生成链接会将组件与应用程序过度耦合，并使它们的重用变得复杂。我过去曾经这样做过，维护起来简直是一场噩梦。即使不是与翻译相关的事情，当您从应用程序的不同位置生成了指向某些 View 的链接时，请考虑更改该 View 的 URL。我认为现在这是不好的做法，不推荐任何比 TODO 应用程序更大的应用程序。

现在我正在使用单独的服务，该服务根据应用程序配置/国际化动态处理链接和路由的生成。

该服务在 Webpack 配置中作为全局公开，例如 LocationPointer。例如:

LocationPoiner.admin() 

将返回指向基于事件语言的管理 View 的字符串(/en/admin-panel)。

我不认为语言是一种可变的状态。出于 SEO 和 UX 的原因，我想要的是基于可共享 URL 的国际化，这是唯一的事实来源。

如果您在 SPA 上并通过单击按钮等更改语言，则整个应用程序将被迫完全刷新。

在页面加载期间，我检测语言，将其值保存在某处并提取正确的翻译。

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

我拉取的前端翻译存储在另一个服务中，并通过 Webpack 作为全局公开为 __()，它返回翻译后的字符串。

所以如果我想在我的 React 组件中添加 Link 我会这样做:

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

当您同时在单个页面上使用多种语言时，将语言作为 Prop 传递对我来说很有意义。否则，在我看来 - 它只会造成困惑。