时间戳

首页 > 解决方案 > 我无法在 ReactJS 中将值从子组件传递给父组件（功能组件）

javascript - 我无法在 ReactJS 中将值从子组件传递给父组件（功能组件）

问题描述

我正在尝试使用 ReactJS 构建一个电子商务网站（没有任何后端或服务器）。

我总共有 4 个组件：

  1. 导航栏.jsx
  2. 主页.jsx
  3. 产品.jsx
  4. 购物车.jsx

**我想要的是，当用户单击products.jsx 中的“添加到购物车”按钮时，购物车编号应显示在导航栏右上角但不显示。

我尝试了什么：我只是将道具从 Products.jsx 页面传递到 Navbar.jsx 但它不起作用。我尝试了很多，但无法做到..请帮助我...在此先感谢

[只熟悉功能组件]**

代码：Navbar.jsx

import React from 'react'
import { Link } from 'react-router-dom'
function Navbar(props) {
    return (
        <div>
            <div className="d-flex bg-primary flex-row justify-content-between text-light ">
                <div className="left d-flex">
                        <li className="my-2"><Link className="text-light p-3 py-2" to="/">HOME</Link></li>
                        <li className="my-2"><Link className="text-light p-3 py-2" to="/products">PRODUCTS</Link></li>
                        <li className="my-2"><Link className="text-light p-3 py-2" to="/cart">CART</Link></li>
                </div>
                <div className="right">
                    <p>CART is:</p><p className="mx-2 h3">{props.text}</p> 
                        {/* I WANT TO DISPLAY THE CART ABOVE HERE */}
                </div>
        </div>
        </div>
    )
}
export default Navbar

代码：Products.jsx

import React, { useState } from 'react'
import Router from '../Router';
import Navbar from './Navbar';
function Products() {
    return (
        <div>
            <h1>PRODUCTS</h1>
            <button className="btn btn-success">ADD TO CART</button>
            {/* WHEN I CLICK ON ADD TO CART, CART NUMBER SHOULD UPDATED IN NAVBAR */}
        </div>
    )
}
export default Products

代码：Router.jsx

import React from 'react'
import {
    BrowserRouter,
    Switch,
    Route,
    Link
  } from "react-router-dom";
  import Home from './components/Home';
import Navbar from './components/Navbar';
import Products from './components/Products';
import Cart from './components/Cart';
function router() {
    return (
        <>
        <BrowserRouter>
        {/* <Navbar text="3"/> */}
        <Navbar/>
        <Switch>
          <Route exact path='/' component={Home}/>
          <Route exact path='/cart' component={Cart}/>
          <Route exact path="/products" component={Products}/>
        </Switch>
        </BrowserRouter>
        </>  
    )
}
export default router

代码：index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Home from './components/Home';
import Navbar from './components/Navbar';
import Products from './components/Products';
import './index.css';
import {
  BrowserRouter,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Router from './Router';
ReactDOM.render(

  <Router />
  ,
  document.getElementById('root')
);

文件夹结构： 文件夹结构

请帮助我...提前致谢

标签： javascriptreactjs

解决方案

您必须做的是在单击按钮时将要显示在购物车中的值从产品页面转移到导航栏。

Navbar 和 Products 组件都有一个共享的父级；路由器.jsx。这意味着您的值必须通过“回调”从 Navbar.jsx 上升到 Router.jsx 中的状态。然后状态将作为导航栏的道具。

遵循该方法将允许您动态更新。总结；您只需要路由器中的 1 个状态，以及导航栏中的 1 个作为概率的回调，它会更新路由器中的状态。

推荐阅读