【发布时间】：2021-02-22 05:20:37
【问题描述】：
我的 React 应用程序中的组件如下。 -App.js -导航栏组件 -HomeComponent -页脚组件
我想创建一个 Onclick 方法，当用户单击导航栏的按钮时，页面会滑到那个特定的 div。而且当用户滚动到一个 div 时，同名的按钮也会高亮显示。
【问题讨论】：
-
尝试发布一些您目前尝试过的代码。
标签： html css reactjs navigation
【发布时间】：2021-02-22 05:20:37
【问题描述】：
有两种方法可以实现您的要求
- 使用 Redux（首选方式）
只需在 redux 中为您的应用维护状态。您可以将当前可见的 div 名称存储在 redux 中，然后从 HomeComponent 订阅此 redux 状态。
- App 组件中的本地组件状态
您可以在 App 组件中维护一个本地状态，然后传递该本地状态及其回调函数将该状态更新为 NavbarComponent 和 HomeComponent。
让我们以功能组件为例
const [currentVisibleState,setCurrentVisibleState] = useState("");
现在只需将下面的内容传递给 NavbarComponent 和 HomeComponent 两个组件
<NavbarComponent
currentVisibleState={currentVisibleState}
setCurrentVisibleState={setCurrentVisibleState}
/>
要向下滚动到一个 div，您可以使用 scrollIntoView 函数
【讨论】：