如何从组件调用状态到页面？

Question

我正在创建一个示例 dApp，它在每个页面的页面顶部带有“Header”组件。所以，我创建了一个 header 组件，我让人们在 Header.tsx 中连接到他们的 MetaMask 钱包，他们成功地做到了，我将他们的钱包 ID 保持在 currentAccount 状态。

Header.tsx:

const Header: FunctionComponent<{}> = (props) => {
const [currentAccount, setCurrentAccount] = useState("");

async function checkAccount() {
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' })
    setCurrentAccount(accounts[0]);
}

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;

但是在我的主页上，没有任何关于获取用户钱包ID的代码，我不想在这里重写代码，因为这不是正确的方法。作为 React 的新手，我无法使我尝试过的代码像尝试导入函数或变量一样工作。如何在主页调用currentAccount状态？

Home.tsx:

const HomePage: FunctionComponent<{}> = () => {

    useEffect(() => {

        onInit()

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

    async function onInit() {
        
    }

    async function onClickMint() {
        alert("mint");
    }

    return (
        <>
            <div>xx
            </div>
        </>
    );
};
export default HomePage;

这是我的 app.tsx，如您所见，我同时看到了所有组件。但是我想在我的 Home 组件中使用我在 Header 组件中获得的状态。

App.tsx:

import Header from './components/Header';


    const App: FunctionComponent<{}> = () => {
        return (
            <Router>
                <Header />
                <Route exact path="/" component={HomePage} />
                <Route exact path="/wallet" component={Wallet} />
                <Footer />
            </Router>
        );
    };
    export default App;

Answer 1

快速回答：

只需在顶层创建您的状态 (App.tsx) 并将 currentAccount、setCurrentAccount 作为其他组件的属性

App.tsx:

从'./components/Header'导入Header；

const App: FunctionComponent<{}> = () => {
    const [currentAccount, setCurrentAccount] = useState("");

    return (
        <Router>
            <Header />
            <Route exact path="/">
            <HomePage currentAccount={currentAccount} setCurrentAccount={setCurrentAccount}/>
            </Route>
            <Route exact path="/wallet">
            <Wallet  currentAccount={currentAccount} setCurrentAccount={setCurrentAccount}/>
            </Route>
            <Footer />
        </Router>
    );
};
export default App;

更长的答案：

你需要了解 redux 或简单的 useContext 钩子

例如，使用 useContext 挂钩，您可以创建一个包含您的状态的上下文，并且您可以在任何 child 组件中访问该上下文，而无需使用道具，当您有多个 child任大child任...

在这里你可以找到关于如何使用 useContext Hook 的文档： https://reactjs.org/docs/hooks-reference.html#usecontext

如何从组件调用状态到页面？

How to call a state from a component to a page?

reactjs

web3