如何在组件之间共享值?

Question

我是react的新手，在我将钱包连接到react网站后，我正试图分享我从区块链网络获得的价值。事实上，它在连接后加载了另一个组件，我想把我从连接组件中得到的值赋给新组件。

你可以看看这里，在navbar.js的连接组件，我需要发送wallet到我的第二个组件page2.js:

import { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import { Container, Image, Navbar, Nav } from 'react-bootstrap';
import { Link, scroller } from "react-scroll";
const Navigation = () => {
const history = useHistory();
const [ wallet, setWallet ] = useState("");
const [ navBarShrink, setNavbarShrink ] = useState(false);
const connect = async () => {
const provider  = await web3Modal.connect();
const web3      = getWeb3(provider);
const accounts  = await web3.eth.getAccounts();
const address   = accounts[0];
const networkId = await web3.eth.net.getId();
const chainId   = await web3.eth.chainId();
const newAccounts = await Promise.all(accounts.map(async (address: string) => {
const balance = await web3.eth.getBalance(address);
const tokenBalances = await Promise.all(tokenAddresses.map(async (token) => {
const tokenInst = new web3.eth.Contract(tokenABI, token.address);
const balance = await tokenInst.methods.balanceOf(address).call();
return {
token: token.token,
balance
}
}))
return {
address,
balance: web3.utils.fromWei(balance, 'ether'),
tokens: tokenBalances
}
}))

setWallet(newAccounts);

return (
<Navbar collapseOnSelect expand="lg" className={ !navBarShrink ? ("navbar navbar-expand-lg bg-secondary text-uppercase fixed-top main_nav"): ("navbar navbar-expand-lg bg-secondary text-uppercase fixed-top main_nav navbar-shrink")} expand="lg" sticky="top">
<Container>
<Navbar.Brand>
Navbar code
</Navbar.Collapse>
</Container>
</Navbar>
);
}
export default Navigation;

这里是page2.js，我需要在这里显示const 'wallet'的值

import { Container, Image } from "react-bootstrap";


const Page2 = () => {
return (
<section className="page-section bg-primary text-blue mb-0">
<Container>
<div className="divider-custom divider-light">
<div className="divider-custom-line"></div>
<div className="divider-custom-line"></div>
</div>
<div className="row">
<div className="col-lg-4 mr-auto"><p className="lead">wallet info is : {wallet}</p></div>
</div>
</Container>

</section>

);
}

谢谢你的帮助，希望你能理解我。(我删除了很多代码，使其更容易理解)

Answer 1

您可以通过以下方式在组件之间共享数据:

1. 使用Redux, Context API等状态管理，
2. 如果组件像父级和子级那样相关，你可以将数据作为prop发送
3. 使用本地存储(不推荐)