Vite+React 项目子组件没有向父组件传递值

Question

我正在开发一个 Vite+React 项目，目前我正在开发移动导航栏，所以我的第一个问题是当我第一次单击移动导航图标时，导航组件正在显示，但第二次单击隐藏该组件时它不起作用.

第二个问题----> 第一次单击时，它显示可单击，但第二次单击时，尽管它是一个按钮，但它不可单击。

我的Navbar.jsx---->

import React, { useState } from 'react'
import { Link as ScrollLink } from 'react-scroll'
import { Link as RouterLink } from 'react-router-dom'
import companyLogo from '../assets/Images/SSlogo.png'
import navbar_menu_img from '../assets/Images/navbar-menuimg.png'


export default function Navbar({ isMobileMenuClicked, isnavMenuClicked }) {

    return (

        <nav className='fixed flex justify-around w-dvw h-20 border-b border-black bg-darkblue text-mintgreen items-center'>
            <RouterLink >
                <div className='mr-2 text-xl sm:text-2xl lg:text-3xl font-extrabold flex items-center'>
                    <div className='flex w-10 mr-5 ml-3 sm:w-14 lg:w-16 '>
                        <img src={companyLogo} alt='company_logo' className='rounded-full' />
                    </div>
                    <h1>SymptomSage</h1>
                </div>
            </RouterLink>
            <ul className='Nav_lists hidden lg:flex justify-around w-4/12 text-lg '>
                <li style={{ cursor: 'pointer' }}><ScrollLink to='home' smooth={true} duration={500} >Home</ScrollLink></li>
                <li style={{ cursor: 'pointer' }}><ScrollLink to='services' smooth={true} duration={500} offset={-80}>Services</ScrollLink></li>
                <li style={{ cursor: 'pointer' }}><ScrollLink to='contact' smooth={true} duration={500} offset={-90}>Contact</ScrollLink></li>
                <li><RouterLink to='/register'>Register</RouterLink></li>
                <li><RouterLink to='/login'>Login</RouterLink></li>
            </ul>
            <button className='w-8 md:w-10 lg:hidden ' onClick={() => isMobileMenuClicked(!isnavMenuClicked)} >
                <img src={navbar_menu_img} alt='mobile_navbar_menu' />
            </button>

        </nav>

    )
}

Home.jsx---->

import React from 'react'
import Navbar from '../components/Navbar'
import GetStartedbtn from '../components/GetStartedbtn'
import ServiceCard from '../components/ServiceCard'
import systemcheckimg from '../assets/Images/SymtomsCheckImg.jpg'
import healthsolimg from '../assets/Images/HealthsolutionImg.jpg'
import remediesimg from '../assets/Images/RemediesImg.jpg'
import healthtrackerimg from '../assets/Images/HealthtrackerImg.jpg'
import nutritionimg from '../assets/Images/NutritionImg.jpg'
import Button from '../components/Button'
import Footer from '../components/Footer'
import { useState } from 'react'
import MobileMenu from '../components/MobileMenu'

export default function Home() {
    const [isnavMenuClicked, setMobileViewNav] = useState(false);
    function isMobileMenuClicked(value) {
        setMobileViewNav(value);
    }
    return (
        <div id='home' className='flex bg-mintgreen w-full justify-center flex-col items-center'>

            {/************************ hero section ********************************/}
            <div className='flex bg-mintgreen w-full h-dvh justify-center '>
                <Navbar isMobileMenuClicked={isMobileMenuClicked} isnavMenuClicked={isnavMenuClicked} />
                {isnavMenuClicked &&
                    <div className='flex fixed w-full lg:hidden justify-end' >
                        <MobileMenu />
                    </div>}
                <div className='flex text-darkblue text-bold justify-center items-center flex-col w-4/5 mt-5'>
                    <h1 className='text-5xl mb-5' >Understand Your Health with Confidence</h1>
                    <p className='mt-3 mb-5 text-center text-xl'>At SymptomSage, we empower you with instant insights into your well-being.
                        Describe your symptoms, and our AI-driven platform will provide personalized health suggestions
                        and actionable next steps to help you feel informed and in control.</p>
                    <p className='mt-20 mb-5 text-center text-2xl'>Your journey to better health starts here.</p>
                    <GetStartedbtn />
                </div>
            </div>



            {/************************Services section ********************************/}

            <div id='services' className='w-full bg-powderblue flex items-center pb-20 pt-20 flex-col'>
                <h1 className='text-darkblue text-4xl font-extrabold'>Our Services</h1>
                <ServiceCard img={systemcheckimg}
                    heading='Symptom Analysis'
                    subheading='Enter your symptoms, and our AI will analyze and suggest potential health issues.'
                />
                <ServiceCard img={healthsolimg}
                    heading='Health Solutions'
                    subheading='Receive personalized suggestions for managing your symptoms at home or knowing when to seek medical help.'
                />
                <ServiceCard img={remediesimg}
                    heading='Alternative Remedies and Precautions'
                    subheading='Discover natural remedies and simple precautions to support your health based on your symptoms.'
                />
                <ServiceCard img={healthtrackerimg}
                    heading='Health Tracker'
                    subheading='Monitor and record your symptoms over time to gain insights into recurring health patterns.'
                />
                <ServiceCard img={nutritionimg}
                    heading='Nutrition Advice'
                    subheading='Get tailored nutrition tips to help you eat better and manage your symptoms effectively.'
                />

                <GetStartedbtn />
            </div>


            {/************************Contact section ********************************/}
            <div id='contact' className='contact-form flex flex-col w-4/6 place-items-center items-center border-2 m-5 mt-14 pb-12 bg-gray-300 rounded-lg'>
                <h1 className='mt-14 font-extrabold text-4xl mb-10'>Contact Us</h1>
                <form className='flex flex-col w-4/6 '>
                    <label >Name</label>
                    <input type='text' placeholder="Enter Name" />
                    <label>Email id</label>
                    <input type='text' placeholder="Enter Mail" />
                    <label >Subject</label>
                    <input type='text' placeholder="Enter Subject" />
                    <label >Message</label>
                    <textarea rows="4" placeholder="Your message"></textarea>
                    <div className='flex justify-center mt-3'>
                        <Button />
                    </div>

                </form>
            </div>


            {/************************Footer section ********************************/}
            <Footer />

        </div>
    )
}

我的mobileMenu.jsx--->

import React from 'react'
import { Link as ScrollLink } from 'react-scroll';
import { Link as RouterLink } from 'react-router-dom';

function MobileMenu() {
    return (
        <div className=' Nav_mobile w-2/4 text-sm flex-col mt-20 bg-darkblue' >
            <ul className=' '>
                <li style={{ cursor: 'pointer' }}><ScrollLink to='home' smooth={true} duration={500} >Home</ScrollLink></li>
                <li style={{ cursor: 'pointer' }}><ScrollLink to='services' smooth={true} duration={500} offset={-80}>Services</ScrollLink></li>
                <li style={{ cursor: 'pointer' }}><ScrollLink to='contact' smooth={true} duration={500} offset={-90}>Contact</ScrollLink></li>
                <li><RouterLink to='/register'>Register</RouterLink></li>
                <li><RouterLink to='/login'>Login</RouterLink></li>
            </ul>
        </div>
    )
}

export default MobileMenu

我希望当我单击菜单图标时我的移动菜单应该显示，当我单击菜单图标时它再次隐藏。

Answer 1

你所做的事情似乎有点复杂，我有一些事情要补充。

const [isnavMenuClicked, setMobileViewNav] = useState(false);

即使 React use state hook 不要求变量和 setter 名称匹配，按照惯例，通常会以类似的方式命名它们以简化理解过程

const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

那么，如果这个函数中没有任何其他逻辑，那么你实际上并不需要它：

function isMobileMenuClicked(value) {
    setMobileViewNav(value);
}

如果删除它，那么您可以直接将状态设置器传递到导航栏

<Navbar isMobileMenuClicked={() => setMobileMenuOpen(prev => !prev)} isnavMenuClicked={isMobileMenuOpen} />

然后在导航栏中

<button className='w-8 md:w-10 lg:hidden' onClick={isMobileMenuClicked}>

现在应该在每次点击时切换