0

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

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

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

PS
3. 作为一个属性从组件传递给所有级别的每个子级，如下所示： 

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

1 回答 1

1

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

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

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

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

LocationPoiner.admin()

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

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

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

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

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

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

因此，如果我想在我的 React 组件中使用 Link，我会这样做：

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

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

于 2017-09-12T16:35:17.240 回答