如何在 React 中将数据从 Navigation Component 传递到 Home Component？

Question

我的 React 应用程序中的组件如下。 -App.js -NavbarComponent -HomeComponent -FooterComponent

我想创建一个 Onclick 方法，当用户点击导航栏的按钮时，页面会滑到那个特定的 div。而且当用户滚动到 div 时，具有相同名称的按钮会突出显示。

Answer 1

您可以通过两种方式实现您的要求

1. 使用 Redux（首选方式）

只需在 redux 中为您的应用维护状态。您可以将当前可见的 div 名称存储在 redux 中，然后从 HomeComponent 订阅此 redux 状态。

2. App 组件中的本地组件状态

你可以在App组件中维护一个局部状态，然后传递这个局部状态和它的回调函数来更新这个状态向下到NavbarComponent和HomeComponent。

让我们以功能组件为例

const [currentVisibleState,setCurrentVisibleState] = useState("");

现在只需将下面的内容传递给组件 NavbarComponent 和 HomeComponent

<NavbarComponent 
  currentVisibleState={currentVisibleState} 
  setCurrentVisibleState={setCurrentVisibleState}
/>

要向下滚动到 div，您可以使用 scrollIntoView 函数