在 Parent 中反应改变状态，是否将其所有 children 和 sub-children 的调用渲染为迭代？

Question

我正在我的本地存储中设置语言名称，当它从顶部栏中的下拉列表更改时，我希望整个当前视图为 re-rendered 并且将单词翻译成所选语言。我的布局是这样的

render(){


 return (
    <MainContainer>
       <TopBar/>
       <SideBar/>
       <RouteInsideSwitch/>
    </MainContainer>
    )
}

在组件的渲染中，要翻译的词基本上调用一个函数，该函数returns根据本地存储语言名称正确的词。

我更改了语言，并在 maincontainer 中为所选语言设置了状态，并将其设置在本地存储中。但是我不想将该状态从 Maincontainer 移动到我的所有组件。也不想将它存储在 redux 中，因为所有可能的容器都必须收听它，然后将其作为道具传递给它们的 children。

当前发生的是在 mainContainer 中保存状态而不将其传递给任何 children，children 会 re-render 但只有直接的那些，如果有更多 children 在那些 children 等等中，它不会 re-render 因为我没有在整个链中传递状态。

接受任何基于不同语言更改模式的建议。但我的问题是，有什么方法可以 re-render 当前打开的视图（dom 中的所有组件）。

Answer 1

如果您担心您有许多 "possible containers" 都需要处理状态更改，也许可以考虑创建一个包含公共语言呈现逻辑的高阶组件（您的 RouteInsideSwitch 让我相信这可能是问题）。通过这种方式，您可以避免在大量 "possible" 组件中重复该逻辑，这些组件都需要动态语言呈现的功能，并且将避免需要将一堆组件拨入 redux 存储，假设它们在相同的层次结构。

    const DynamicLanguageComp = RenderComponent => {
         return class extends Component {
              constructor(props) {
                  super(props)
                 //additional state setup if needed
                }

             changeLangFunc = () => { /* handle change */ } 

             render() {
                 return <RenderComponent handleLanguageChange={this.changeLangFunc} {...this.props} {...this.state} />
             }

         }
    }

如果您想避免 re-render 在某些可能通过状态更改接收道具的中间组件上，您可以实现生命周期方法 shouldComponentUpdate()，默认情况下 returns真的。您可以将 nextProps 与您当前的道具进行比较，如果 re-render 尽管有新道具但不受欢迎，则 return 为 false。

在 Parent 中反应改变状态，是否将其所有 children 和 sub-children 的调用渲染为迭代？

React changing state in Parent , does render calls for all its children and sub-children as iteration?

javascript

reactjs

react-dom