如何在组件之间共享值？ [复制]答案

【问题标题】：How can I share a value between components? [duplicate]如何在组件之间共享值？ [复制]
【发布时间】：2021-09-30 15:01:22
【问题描述】：

我是 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>
    
      );
    }

感谢您的帮助，希望您能理解我。（为了更容易理解，我去掉了很多代码）

【问题讨论】：

你没有使用任何像redux这样的状态管理库？
我不这么认为，我真的是使用 reactjs 的新手
你可以把它放在 Redux 中或者使用 Context。但更简单的是，您可以将变量从一个组件传递到另一个组件作为道具。我可以建议阅读官方文档吗？请参阅reactjs.org/docs/components-and-props.html
谢谢，我尝试使用prop，但我认为我必须使用格式
但我不能，因为我不想拥有导航栏代码page2.js
阅读此博客：medium.com/coding-in-depth/…

标签： javascript reactjs

【解决方案1】：

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

使用 Redux、Context API 等状态管理，
如果组件像父子组件一样相关，您可以将数据作为道具发送
使用本地存储（不推荐）

【讨论】：