React项目中如何获取Header组件内的currentAccount状态到Home页面

方案1：状态提升（最适合新手，无需引入额外依赖） #

这是最简单的实现方式，把共享的currentAccount状态和钱包连接/断开逻辑从Header组件提升到公共父组件App里，再通过props传递给需要用到的组件：

第一步：修改App.tsx #

把状态和逻辑移到App中，同时给Header和路由页面传值：

import Header from './components/Header';
import { useState } from 'react';

const App: FunctionComponent<{}> = () => {
    // 把钱包状态移到公共父组件
    const [currentAccount, setCurrentAccount] = useState("");

    // 钱包连接逻辑移到这里
    async function connectWallet() {
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' })
        setCurrentAccount(accounts[0]);
    }

    // 钱包断开逻辑移到这里
    function disconnectWallet() {
        setCurrentAccount("");
    }

    return (
        <Router>
            <Header 
                currentAccount={currentAccount}
                connectWallet={connectWallet}
                disconnectWallet={disconnectWallet}
            />
            {/* 给HomePage传递currentAccount，react-router v5 用render属性传参 */}
            <Route 
                exact path="/" 
                render={(props) => <HomePage {...props} currentAccount={currentAccount} />} 
            />
            <Route 
                exact path="/wallet" 
                render={(props) => <Wallet {...props} currentAccount={currentAccount} />} 
            />
            <Footer />
        </Router>
    );
};
export default App;

第二步：修改Header.tsx，改为接收props而不是自己维护状态 #

// 定义props类型
interface HeaderProps {
    currentAccount: string;
    connectWallet: () => Promise<void>;
    disconnectWallet: () => void;
}

const Header: FunctionComponent<HeaderProps> = (props) => {
    // 删掉内部的currentAccount状态和checkAccount方法，全部用props传入的
    const { currentAccount, connectWallet, disconnectWallet } = props;
    // connectHidden和disconnectHidden可以根据currentAccount自动判断，比如：
    const connectHidden = !!currentAccount;
    const disconnectHidden = !currentAccount;

    return (
        <header>
                        <div className="col-xl-3 col-lg-3 col-md-3 col-sm-3">
                            <ul>
                                <li>{!connectHidden && <button className="buy connect-wallet" onClick={connectWallet}><b>Connect Wallet</b></button>}</li>
                            </ul>{currentAccount}
                            <ul>
                                <li>{!disconnectHidden && <button className="buy connect-wallet" onClick={disconnectWallet}><b>Disconnect Wallet</b></button>}</li>
                            </ul>
                        </div>

        </header>
    );
};

export default Header;

第三步：修改Home.tsx，接收props直接使用 #

interface HomePageProps {
    currentAccount: string;
}

const HomePage: FunctionComponent<HomePageProps> = (props) => {
    const { currentAccount } = props;

    useEffect(() => {
        onInit()
        return () => { }
    }, [])

    async function onInit() {
        // 这里可以直接调用currentAccount
        console.log("当前钱包地址：", currentAccount)
    }

    async function onClickMint() {
        if(!currentAccount) {
            alert("请先连接钱包");
            return;
        }
        alert("mint");
    }

    return (
        <>
            <div>当前钱包地址：{currentAccount}
            </div>
        </>
    );
};
export default HomePage;

方案2：Context API（适合多组件共享，避免逐层传参） #

如果你的项目后续有很多页面、组件都需要用到钱包地址，推荐用React自带的Context API做全局状态共享，不需要逐层传props：

1. 新建一个WalletContext.tsx文件定义全局上下文
2. 在App组件里用Provider包裹所有子组件
3. 任意子组件都可以通过useContext直接获取钱包状态和方法，不需要传props
   状态提升已经足够解决你当前的问题，复杂场景再考虑该方案即可。

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