將語言作爲父組件的動態屬性傳遞給React中的所有後代

我正在創建多語言應用程序。所以我想把語言屬性傳播給所有的後代。因此，我可以廣告語前綴在我的應用程序各個環節和途徑，我知道兩種方法可以做到這一點：將語言作爲父組件的動態屬性傳遞給React中的所有後代

使用上下文，但不建議使用它，因爲它是實驗性的。使用
Redux的商店，但在這種情況下，我需要每一個組件連接到商店。

所以我想知道哪種情況更可取或者如果沒有這些情況，那麼可能會有另一種選擇。

P.S.
3.通過從組件屬性到每一個孩子的所有層次深，就像這樣：

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

來源

2017-09-12 Taras Yaremkiv

通常，語言代碼會在網址中顯示，因爲這也用於搜索引擎優化的目的，並使其更容易管理。然後，您可以將語言代碼作爲參數傳播到組件。 – Fawaz

或者你可以使用'道具'。根組件會從某處（可能來自url）獲取語言並通過'props'傳遞給兒童 –

@Fawaz這就是我想要的 –

這裏是我的想法和工作對我最好的解決方案。

處理國際化邏輯並不是真正的組件工作。在該級別生成鏈接會將組件過多地耦合到應用程序，並使其複用變得複雜。我過去做過，這是一場噩夢。甚至沒有翻譯相關的東西，當你從應用程序的不同位置生成鏈接時，請考慮更改一些視圖的URL。我認爲它現在是不好的做法，不推薦比TODO應用程序更大的任何東西。

現在我正在使用單獨的服務，它可以根據應用程序配置/國際化動態生成鏈接和路線。

這項服務暴露在的WebPack配置全球的假設LocationPointer。例如：

LocationPoiner.admin()

將返回字符串指向基於活動語言（/ en /管理面板）的管理視圖。

我不認爲語言是一種多變的狀態。對於搜索引擎優化和用戶體驗的原因，我想要的是基於可共享URL的國際化，這是真實的唯一來源。

如果您使用SPA並通過單擊按鈕等來更改語言，則整個應用程序將被強制完全刷新。

在頁面加載，我發現語言，保存在某個地方它的價值和拉準確的翻譯。

注 - 我的後臺是用國際化一樣，所以當用戶更改語言，有的要求必須以顯示正確的數據再次做了。 這不僅僅是令人耳目一新的前端組件。值得記住它。當您的應用程序增長時，它可能會根據國際化情況對不同的消息/數據做出響應。

我拉出前端的翻譯被存儲在另一個服務並暴露作爲全球通過的WebPack爲__（），它返回翻譯字符串。

所以，如果我想Link在我的陣營組成部分，我會做的事：

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

傳遞語言爲道具對我來說很有意義，當你在同一時刻使用多種語言在一個頁面上。否則，在我看來 - 這隻會造成一團糟。

來源

2017-09-12 16:35:17 mgibala

將語言作爲父組件的動態屬性傳遞給React中的所有後代

回答

相關問題