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

Question

我正在创建一个示例dApp，其中包含"Header"组件放置在每个页面的页面顶部。所以，我创建了一个header组件，我让人们在header中连接到他们的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:

import Header from './components/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钩子，你可以创建一个包含你的状态的上下文，你可以在任何子组件中访问它，而不需要使用props，当你有多个子组件和孙子时，props可能是多余的…

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