如何在Next.js的Drawerr.js中使用Nav.js内的状态常量？

你遇到的问题是因为组件内部的useState状态属于局部变量，外部组件（比如Drawerr.js）无法直接访问。下面给你两种实用的解决办法：

方案一：状态提升（最直接的方式） #

把aaa、bbb这些状态从Nav组件移到Drawerr组件中，再通过props把状态和对应的setter函数传递给Nav组件使用。

改造Nav.js #

// Nav.js
export default function Nav({ aaa, setaaa, bbb, setbbb }) {
  // 直接使用props传入的状态和setter
  return (
    <div className="NestedList">
      <p>当前aaa的值：{aaa}</p>
      <button onClick={() => setaaa('修改后的值')}>修改aaa</button>
    </div>
  )
}

改造Drawerr.js #

// Drawerr.js
import Nav from './Nav'
import { useState } from 'react'

export default function Drawerr() {
  // 在Drawerr中定义状态和setter
  const [aaa, setaaa] = useState('初始值')
  const [bbb, setbbb] = useState('初始值')

  // 直接调用setaaa修改状态
  const handleModifyAaa = () => {
    setaaa('Drawerr中修改的aaa值')
  }

  return (
    <div>
      {/* 把状态和setter通过props传给Nav */}
      <Nav aaa={aaa} setaaa={setaaa} bbb={bbb} setbbb={setbbb} />
      <button onClick={handleModifyAaa}>在Drawerr中修改aaa</button>
    </div>
  )
}

方案二：使用Context API（适合多组件共享状态） #

如果你的组件层级较深，或者多个组件都需要用到这些状态，用Context统一管理状态会更方便。

1. 创建Context文件 #

新建NavContext.js：

// NavContext.js
import { createContext, useContext, useState } from 'react'

const NavContext = createContext()

// 定义Provider组件，包裹需要共享状态的组件
export function NavProvider({ children }) {
  const [aaa, setaaa] = useState('初始值')
  const [bbb, setbbb] = useState('初始值')

  const contextValue = {
    aaa,
    setaaa,
    bbb,
    setbbb
  }

  return (
    <NavContext.Provider value={contextValue}>
      {children}
    </NavContext.Provider>
  )
}

// 自定义Hook，简化Context获取
export function useNavContext() {
  return useContext(NavContext)
}

2. 在根组件中包裹Provider #

修改_app.js（Next.js根组件）：

// _app.js
import { NavProvider } from '../path/to/NavContext'

export default function App({ Component, pageProps }) {
  return (
    <NavProvider>
      <Component {...pageProps} />
    </NavProvider>
  )
}

3. 在Nav.js中使用Context #

// Nav.js
import { useNavContext } from './NavContext'

export default function Nav() {
  const { aaa, setaaa } = useNavContext()

  return (
    <div className="NestedList">
      <p>当前aaa的值：{aaa}</p>
      <button onClick={() => setaaa('Nav中修改的值')}>修改aaa</button>
    </div>
  )
}

4. 在Drawerr.js中使用Context #

// Drawerr.js
import Nav from './Nav'
import { useNavContext } from './NavContext'

export default function Drawerr() {
  const { setaaa } = useNavContext()

  return (
    <div>
      <Nav />
      <button onClick={() => setaaa('Drawerr中修改的值')}>在Drawerr中修改aaa</button>
    </div>
  )
}

注意事项 #

React组件的内部状态是封装的，绝对不要试图直接访问子组件的局部状态或setter函数，必须通过上述props传递或状态管理方案实现组件间状态共享。

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