如何在Next.js组件中访问页面的useState状态？

问题背景 #

在index.js中通过useState管理模态框的显示状态，需要在BottomNavbar组件的按钮点击时触发状态更新，但不知道如何跨文件访问该状态及更新函数。

解决方案 #

React中跨组件传递状态更新逻辑最直接的方式是通过Props传递更新函数，将父组件（Home）的setShowModal传递给子组件（BottomNavbar、Modal），实现状态的统一控制。

1. 修改index.js #

• 引入BottomNavbar组件
• 将setShowModal通过props传递给BottomNavbar和Modal
• 在页面中渲染BottomNavbar

修改后的代码：

// Import components
import Auth from '../components/Auth';
import Modal from '../components/Modal';
import BottomNavbar from '../components/BottomNavbar'; // 新增引入
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} onClose={() => setShowModal(false)} /> {/* 新增onClose props */}
      </main>
      <BottomNavbar onOpenModal={() => setShowModal(true)} /> {/* 渲染BottomNavbar并传递更新函数 */}
    </>
  );
}

2. 修改BottomNavbar.js #

• 接收props中的onOpenModal函数
• 绑定到按钮的onClick事件

修改后的代码：

export default function BottomNavbar({ onOpenModal }) { // 接收props

  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">
          <button onClick={onOpenModal}>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>
  );
}

3. 修改Modal.js #

• 接收props中的onClose函数
• 绑定到关闭按钮的onClick事件

修改后的代码：

import React from 'react'

export const Modal = ({ isVisible, onClose }) => { // 新增接收onClose
  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" onClick={onClose}> {/* 绑定关闭事件 */}
          <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;

额外说明 #

如果组件层级较深，props传递会显得繁琐，可以考虑使用React Context来全局管理模态框状态，但对于当前简单的层级，props传递是最直接高效的方案。

内容的提问来源于stack exchange，提问作者SKYZE