时间戳

首页 > 解决方案 > 更新其他 React 组件

javascript - 更新其他 React 组件

问题描述

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

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

应用程序.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 之外，其中包含我需要更新的所有不同页面。

我需要做的就是以某种方式将更新请求传递给每个其他组件。如果它在不重新加载页面的情况下发生会很好，尽管这会有点工作。

标签： javascriptreactjs

解决方案

你没有提到使用 Redux，所以我假设你只是使用 React 状态。将语言保持在顶级组件的状态，并将语言传递给需要它的组件。给 Switch 一个回调函数，当语言改变时改变顶层状态。

推荐阅读