javascript - 如何在组件之间共享值？

问题描述

我是 reactjs 的新手，在我将钱包连接到我的 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>
    
      );
    }

谢谢你的帮助，希望你能理解我。（我删除了很多代码以便于理解）

标签： javascriptreactjs

javascript - 如何在组件之间共享值？

问题描述

解决方案

推荐阅读