React项目中如何在不同组件之间传递钱包连接获取的区块链数据

你的wallet状态存储在Navigation组件内部，属于组件私有状态，外部组件默认无法直接访问，根据项目复杂度不同有3种常用落地方案：

方案1：状态提升（最适合小型项目，无额外依赖） #

把wallet状态从Navigation组件提升到两个组件的共同父组件（一般是定义路由的App.js），通过props传递状态和更新方法：

1. 修改App.js代码：

import { useState } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Navigation from './navbar'
import Page2 from './page2'

function App() {
  const [wallet, setWallet] = useState("")
  return (
    <Router>
      {/* 把更新方法传给导航组件 */}
      <Navigation setWallet={setWallet} />
      <Route path="/page2" >
        {/* 把钱包数据传给Page2 */}
        <Page2 wallet={wallet} />
      </Route>
      {/* 其他路由逻辑 */}
    </Router>
  )
}
export default App

2. 修改navbar.js代码：
   删除组件内部的const [ wallet, setWallet ] = useState("");声明，改为从props接收setWallet，原有connect方法里的setWallet逻辑不需要改动。

const Navigation = ({setWallet}) => {
  // 原有逻辑不变
}

3. 修改page2.js代码：
   从props接收wallet即可使用，注意wallet是数组对象，不能直接放在JSX中渲染，需要取具体字段展示，否则会报错

const Page2 = ({wallet}) => {
  return (
    // 原有代码修改为类似写法
    <p className="lead">钱包地址 : {wallet?.[0]?.address || '未连接钱包'}</p>
  )
}

方案2：React Context API（适合中等规模项目，避免多层props透传） #

如果项目组件嵌套深，逐层传props效率低，可以用Context做全局状态共享：

1. 新建WalletContext.js文件：

import { createContext, useContext, useState } from 'react'

const WalletContext = createContext()

export function WalletProvider({children}) {
  const [wallet, setWallet] = useState("")
  return (
    <WalletContext.Provider value={{wallet, setWallet}}>
      {children}
    </WalletContext.Provider>
  )
}

// 自定义Hook简化调用
export function useWallet() {
  return useContext(WalletContext)
}

2. 在App.js中用Provider包裹所有组件：

import { WalletProvider } from './WalletContext'
function App() {
  return (
    <WalletProvider>
      {/* 原有路由、导航等所有组件代码 */}
    </WalletProvider>
  )
}

3. 导航组件中调用Hook获取更新方法：

import { useWallet } from './WalletContext'
const Navigation = () => {
  const {setWallet} = useWallet()
  // 原有connect方法直接调用setWallet更新状态即可
}

4. Page2组件中调用Hook获取钱包数据：

import { useWallet } from './WalletContext'
const Page2 = () => {
  const {wallet} = useWallet()
  // 直接使用wallet渲染即可
}

方案3：状态管理库（适合大型项目，多全局状态管理场景） #

如果项目已经接入Zustand、Redux、Jotai等状态管理库，直接将wallet状态存入全局store即可，以轻量的Zustand为例：

// store.js
import { create } from 'zustand'

const useWalletStore = create((set) => ({
  wallet: "",
  setWallet: (newWallet) => set({wallet: newWallet})
}))

后续在任意组件中直接调用store的读写方法即可，不需要额外Provider包裹。

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