React中如何在其他页面组件中使用某页面内定义的state状态

React 是单向数据流设计，组件内部定义的状态默认只能在组件自身和它的子组件树里访问，外部组件（比如父组件page.js）无法直接读取子组件UploadPlantPic内部声明的picData状态，要跨组件共享这个状态，有以下几种常用实现方案。

这是React官方推荐的最基础方案：把需要跨组件共享的状态，提升到所有要用到这个状态的组件的最近共同父组件里定义，再通过props把状态、状态修改方法下发给子组件使用。

你的场景里page.js本身就是UploadPlantPic的父组件，直接把状态挪到page里定义即可，代码示例：

// page.js
import { useState } from 'react'
import UploadPlantPic from './UploadPlantPic'

const Page = () => {
  // 公共状态定义在父组件
  const [picData, setPicData] = useState(false)

  // 这里直接就能访问picData写业务逻辑
  if (!picData) {
    console.log(false)
  }

  return (
    <div>
      {/* 把状态和修改方法通过props传给上传组件 */}
      <UploadPlantPic picData={picData} setPicData={setPicData} />
    </div>
  )
}
export default Page

对应的UploadPlantPic组件修改为接收props使用状态，不需要自己重复定义状态：

// UploadPlantPic.jsx
const UploadPlantPic = ({ picData, setPicData }) => {
  // 组件内需要读/写picData的时候，直接用props传进来的变量即可
  // 比如上传成功后执行 setPicData(上传返回的图片地址)，父组件page.js会同步拿到最新值
  return <div>图片上传组件</div>
}
export default UploadPlantPic

如果要用到picData的组件层级很深，或者很多平级、跨分支的组件都要访问这个状态，一层层传props会非常繁琐，这时候可以用React内置的Context API做状态全局共享：

1. 先创建公共Context文件

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

const PicContext = createContext(null)

// 封装状态Provider
export const PicProvider = ({ children }) => {
  const [picData, setPicData] = useState(false)
  return (
    <PicContext.Provider value={{ picData, setPicData }}>
      {children}
    </PicContext.Provider>
  )
}

// 封装自定义hook方便调用
export const usePicContext = () => useContext(PicContext)

2. 用Provider包裹需要共享状态的组件树，比如在根layout.js里配置：

// app/layout.js
import { PicProvider } from './PicContext'

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <PicProvider>
          {children}
        </PicProvider>
      </body>
    </html>
  )
}

3. 所有被Provider包裹的组件，都可以直接调用hook拿到状态，不需要层层传props：

// page.js 中使用
import { usePicContext } from './PicContext'
const Page = () => {
  const { picData } = usePicContext()
  if (!picData) console.log(false)
  return <div><UploadPlantPic /></div>
}

// UploadPlantPic.jsx 中使用
import { usePicContext } from './PicContext'
const UploadPlantPic = () => {
  const { picData, setPicData } = usePicContext()
  // 正常读写状态即可，所有引用该Context的组件都会同步更新
  return <div>图片上传组件</div>
}

如果项目规模大、全局状态多，可以选用Zustand、Redux这类成熟的状态管理库实现状态共享，适合复杂业务场景，小项目用前两种方案足够。

注意：不要尝试通过ref等方式强行把子组件内部状态暴露给父组件，会破坏React单向数据流的设计，提升后续维护成本。

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