如何从NextJs的组件访问页面中的useState ?

Question

我试图创建一个模式，将显示在我的index.js页面。为此，我使用useState将其显示状态设置为true或false。但是，我想从我的BottomNavbar组件访问这个useState，以便当我单击组件中的按钮时，模式显示或稍后隐藏。然而，我似乎找不到如何从其他文件访问useState。什么好主意吗?

这是我的index.js文件，我加载的模式:

// Import components
import Auth from '../components/Auth';
import Modal from '../components/Modal';
import React, { useState } from "react";
// Home page
export default function Home() {
const [showModal, setShowModal] = useState(false);
return (
<main class="mt-2 flex flex-row justify-around items-center">
<div class="mt-2 flex flex-col justify-center items-center basis-2/3">
<section class="border-4 rounded-lg p-2 mb-2 bg-red-400 w-8/12">
<h4 class="text-4xl font-bold text-slate-800">Welcome to Open Calendar!</h4>
<p class="text-slate-800">Organize your day, week, or month with <strong>Open Calendar</strong>, <br></br> by signing up today or logging in.</p>
</section>
<Auth />
<section class="border-4 rounded-lg p-2 mt-2 bg-red-400 w-8/12">
<h4 class="text-4xl font-bold text-slate-800">How to use ?</h4>
<p class="text-slate-800">Click on the + at the bottom of the screen to add an item to your <br></br> personalized calendar.</p>
</section>
</div>
<div class="basis-1/3">
<img class="h-96" src={'/calendar.png'} />
</div>
<Modal isVisible={showModal} />
</main>
);
}

这是我的BottomNavbar.js文件，我想从这里改变模式显示状态:

export default function BottomNavbar() {
return (
<nav class="fixed z-10 w-full h-16 max-w-lg -translate-x-1/2 bg-white border border-gray-200 rounded-full bottom-4 left-1/2">
<div class="grid h-full max-w-lg grid-cols-3 mx-auto">
<div class="inline-flex flex-col items-center justify-center px-5 rounded-full hover:bg-gray-50 group">
{/* Change the showModal state from index.js here */}
<button onClick={() => setShowModal(true)}>Calendar Settings</button>
</div>
<div class="flex items-center justify-center">
<svg class="h-12 w-12 p-2 rounded-full bg-slate-500 hover:bg-blue-900" fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"></path>
</svg>
</div>
<div class="inline-flex flex-col items-center justify-center px-5 rounded-full hover:bg-gray-50 group">
<button>Profile</button>
</div>
</div>
</nav>
);
}

这是我的modal。js文件，我在这里创建了modal:

import React from 'react'
export const Modal = ({ isVisible }) => {
if (!isVisible) return null;

return (
<div class="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
<div class="w-[600px] flex flex-col">
<button class="place-self-end mb-2">
<svg class="h-8 w-8 p-2 rounded-full bg-slate-500 hover:bg-blue-900" fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"></path>
</svg>
</button>
<div class="bg-white p-2 rounded-lg">Modal</div>
</div>
</div>
)
}
export default Modal;

Answer 1

你应该使用React的提升状态概念。您应该在"最少共同祖先组件"上声明状态。你想要使用那个状态的所有组件。对于您的示例，让我们假设您想在Home组件中使用您的BottomNavbar组件。所以，你的Home组件看起来是这样的:

<>
<main>
...your existing code here
<Modal isVisible={showModal} />
</main>
<BottomNavbar setShowModal={setShowModal}/>
</>

你的底部导航栏组件应该接受setShowModal作为一个道具，

export default function BottomNavbar({setShowModal}){
...your code here
}

如果你的状态消费者不是最不常见的祖先组件，你可以通过使用上下文API或通过使用组件组合来重组组件结构来避免钻取道具。

Answer 2

你应该创建一个函数，使setShowModal为true，并把它传递给组件来改变showModal的状态。

const changeState=(value)=>{setShowModal(value);}
<BottomNavbar changeState=changeState/>

:

<button onClick={() => changeState(true)}>Calendar Settings</button>