Question

我正在本地存储中设置语言名称，当它从topbar的下拉菜单更改时，我希望重新渲染整个当前视图并将单词翻译为所选语言。我的布局是这样

render(){


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

在呈现组件时，要翻译的单词基本上会调用一个函数，该函数根据本地存储语言名称返回正确的单词。

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

当前发生的情况是，在mainContainer中保存状态而不将其传递给任何子代，子代确实会重新渲染，但只会渲染直属子代，如果这些子代中有更多子代，依此类推，则不会重新渲染，因为我没有在整个链条上传递状态。

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

Answer 1

如果您担心有多个“可能的容器”都需要处理状态更改，则可以考虑创建一个包含公共语言呈现逻辑的高阶组件（您的RouteInsideSwitch让我相信这可能会问题）。这样，您可以避免将逻辑复制到大量都需要动态语言呈现功能的“可能”组件中，并且可以避免将一堆组件拨入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} />
             }

         }
    }

如果您想避免在某些可能通过状态更改来接收道具的中间组件上重新渲染，则可以实现生命周期方法ShouldComponentUpdate（），该方法默认情况下返回true。您可以将nextProps与您当前的道具进行比较，如果尽管有新道具又不需要重新渲染，则返回false。

在Parent中反应变化的状态，是否将所有子级和子级子级的调用都呈现为迭代？

1 个答案: