reactjs - 如何使用单个按钮在 React js 中隐藏和显示组件

Question

我仍在尝试 React JS。所以，我希望能够使用单个按钮在 react js 中隐藏和显示组件。我已经尽了最大的努力并观看了视频。如果我想使用两个不同的按钮，我可以这样做，但我想使用同一个按钮。只需一个按钮即可隐藏或显示组件。到目前为止，当我单击按钮时，它会显示组件，但是当我再次单击它以隐藏相同的组件时，我似乎无法让它工作。

因此，“Addbirth”是我导入的组件的名称，当我单击“ADD BITHDAY”按钮时要显示该组件，单击同一按钮时要隐藏该组件。

到目前为止，这是我的代码：

import React, { useEffect, useState } from 'react';
import "./home.css";
import {dataFile} from "./data";
import Addbirth from "../components/addbirthday"

export default function Home() {
const [showAdd, setShowAdd] = useState([]);

const showRemove = () =>{
if(showAdd){
  setShowAdd(Addbirth)
 }
 else if(!setShowAdd){
  setShowAdd([])
 }

}

 return (
    
    <>
    
   {showAdd }
    
    <div className="container homeContainer">
        
       <div className="homeWrapper">
           <div className="addContainer">
                <h2 className="headerTitle">You have 5 birthdays today</h2>
                <button className="btn" onClick={ showRemove} >ADD BITHDAY</button>
           </div>

谢谢你帮助我。

标签： reactjs

Answer 1

试试这个：

 import React, { useEffect, useState } from 'react';
import "./home.css";
import {dataFile} from "./data";
import Addbirth from "../components/addbirthday"

export default function Home() {
const [isAddShow, setAddShow] = useState(false);

const handleClick = () =>{
setAddShow(!isAddShow)
 }

}

 return (
    
    <>
    
   {showAdd && <Addbirth />}
    
    <div className="container homeContainer">
        
       <div className="homeWrapper">
           <div className="addContainer">
                <h2 className="headerTitle">You have 5 birthdays today</h2>
                <button className="btn" onClick={ handleClick} >ADD BITHDAY</button>
           </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

编辑：所以一开始，你做了：

const [showAdd, setShowAdd] = useState([]);

这意味着 showAdd 将是一个空数组 [] 因为您将其作为初始状态传递。没关系，但稍后在代码中你做了：

{showAdd }

这将始终在 Home 组件中呈现 showAdd 值，即使它是一个空数组，这不是一个好方法。

当您只想在某些条件下显示组件时，最好的方法是使用三元运算符，例如：

{isClicked ? <ComponentA/> : <ComponentB/>}

如果 isClicked 为真 ComponentA 将在 isClicked 为假时返回（渲染） ComponentB 将被返回，如果你只想在真时渲染某些东西，你可以这样做：

{isClicked && <ComponentA/>}

在这里你可以阅读更多关于三元的信息：MDN 三元

因此，您不必为渲染组件创建数组。我看到你有一个数据文件，如果你想为每个用户多次渲染同一个组件，或者你可以像这样做的任何事情：

dataFile.map(user => <UserComponent/>)

请记住，在这种情况下，dataFile 必须是一个数组。

我希望它可以帮助您现在更好地理解:)