如何在 React 中将数据从导航组件传递到主页组件？

Question

我的 React 应用中的组件如下。 -App.js -导航栏组件 -HomeComponent -页脚组件

我想创建一个 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 函数