Question

我有一个导航栏，其中的导航按钮可以更改网站的语言。而不是使用不同的html，我只是用数据库中的文本替换文本。但是，在组件中执行任何操作只会更新该组件，而我需要一种方法来更新其他所有组件

我还没有尝试过任何有用的方法，因为通常的解决方案布局很复杂。

App.js

function App() {

  return (
    <div className="App">
      <Router>
        <div className="container" id="main">
        <Navbar />
       <Switch>
         <Route exact path="/" component={Home}></Route>
         <Route path="/gallery" component={Gallery}></Route>
       </Switch>
       </div>
      </Router>
    </div>
  );
}

export default App;

我的导航栏在Switch之外，其中包含我需要更新的所有不同页面。

我要做的就是以某种方式将更新请求传递给其他所有组件。如果可以在不重新加载页面的情况下发生，那将是很好的选择，尽管这样做会有所帮助。

Answer 1

您没有提到使用Redux，所以我假设您只是在使用React状态。使语言保持在顶级组件的状态，然后将语言传递给需要它的组件。 Give Switch的回叫功能可在更改语言时更改顶级状态。

更新其他React组件

1 个答案: