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

Question

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

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

Answer 1

有两种方法可以实现您的需求

1. 使用Redux(首选方式)

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

2. 本地组件状态

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

让我们以功能组件

为例

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

现在把这个传递给两个组件NavbarComponent&HomeComponent

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

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