Reactjs 如何使用react中的功能组件单击按钮时显示组件

我正在做一个React项目，因为我有一个父组件是Studentslist.js 在这个组件中，我有两个按钮，一个是营销按钮，另一个是计算机按钮

我有一个卡片组件，它是Studentslist.js的子组件

现在我首先要隐藏卡组件，我只想在单击“计算机”按钮时显示卡组件

我知道如何使用基于类的组件来实现这一点，但我正在尝试使用函数组件

这是Studentslist.js

import React, { useState } from 'react';
import './Studentslist.css';
import Card from '../../Components/Card/Card';

function Studentslist() {

    const [hide, show] = useState({})
    return(
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Departments'>
                        <button className='btn btn-primary'>Marketing</button>
                        <button className='btn btn-primary ml-2'>Computers</button>
                    </div>
                    <Card></Card>
                </div>
            </div>
        </div>
    )
}

export default Studentslist

import React，{useState}来自“React”；
导入“/Studentslist.css”；
从“../../Components/Card/Card”导入卡片；
函数学生列表（）{
const[hide，show]=useState（{}）
返回(
营销
计算机
)
}
导出默认学生列表

这是Card.js

import React from 'react';
import './Card.css';

function Card() {
    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-6'>
                    <div className='Registration'>
                        <form>
                            <div className="form-group">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="email">Email</label>
                                <input type="email" className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" className="form-control" id="password"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="qualification">Qualification</label>
                                <input type="text" className="form-control" id="qualification"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="branch">Branch</label>
                                <input type="text" className="form-control" id="branch"></input>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                            <button className='cancel btn btn-danger ml-2'>Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Card

从“React”导入React；
导入“./Card.css”；
功能卡（）{
返回(
名字
姓氏
电子邮件
密码
资格
分支机构
提交
取消
)
}
导出默认卡

如果您觉得我不清楚我的疑问，请发表评论。

现在应该可以了

import React, { useState } from 'react';
import './Studentslist.css';
import Card from '../../Components/Card/Card';

function Studentslist() {

    const [show, setShow] = useState(false);
    return(
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Departments'>
                        <button className='btn btn-primary'>Marketing</button>
                        <button onClick={ () => setShow(!show)} className='btn btn-primary ml-2'>Computers</button>
                    </div>
                    {show && <Card></Card>}
                </div>
            </div>
        </div>
    )
}

export default Studentslist

import React，{useState}来自“React”；
导入“/Studentslist.css”；
从“../../Components/Card/Card”导入卡片；
函数学生列表（）{
const[show，setShow]=useState（false）；
返回(
营销
setShow（！show）}className='btn btn主ml-2'>计算机
{show&&}
)
}
导出默认学生列表

现在应该可以了

import React, { useState } from 'react';
import './Studentslist.css';
import Card from '../../Components/Card/Card';

function Studentslist() {

    const [show, setShow] = useState(false);
    return(
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Departments'>
                        <button className='btn btn-primary'>Marketing</button>
                        <button onClick={ () => setShow(!show)} className='btn btn-primary ml-2'>Computers</button>
                    </div>
                    {show && <Card></Card>}
                </div>
            </div>
        </div>
    )
}

export default Studentslist

import React，{useState}来自“React”；
导入“/Studentslist.css”；
从“../../Components/Card/Card”导入卡片；
函数学生列表（）{
const[show，setShow]=useState（false）；
返回(
营销
setShow（！show）}className='btn btn主ml-2'>计算机
{show&&}
)
}
导出默认学生列表

函数学生列表（）{
const[showCard，setShowCard]=使用状态（false）；
返回(
setShowCard（true）}className='btn btn primary'>营销
计算机
{showCard&&}
)
}
导出默认学生列表

函数学生列表（）{
const[showCard，setShowCard]=使用状态（false）；
返回(
setShowCard（true）}className='btn btn primary'>营销
计算机
{showCard&&}
)
}
导出默认学生列表

这是设置按钮切换的方法

const [toggle, setToggle] = useState(false)

<button className='btn btn-primary ml-2' onClick={() => setToggle(!toggle)>Computers</button>

{toggle && <Card></Card>}

const[toggle，setToggle]=useState（false）
setToggle（！toggle）>计算机
{切换&&}

这是设置按钮切换的方法

const [toggle, setToggle] = useState(false)

<button className='btn btn-primary ml-2' onClick={() => setToggle(!toggle)>Computers</button>

{toggle && <Card></Card>}

const[toggle，setToggle]=useState（false）
setToggle（！toggle）>计算机
{切换&&}