如何显示和隐藏 react .tsx 文件？

问题描述

我有一个按钮。单击按钮时我想显示表格，再次单击时我想隐藏数据。第一个数据可见 = false

Jsx 文件无法识别状态。 我试图隐藏的 div 块名称是 apis。

function css(){
  
}
const myfunc= () => {
return (
   
      <div className="btn">
     <button id="veriGoster" onClick={css}> 
       Show
     </button>
         
        </div>
     <div className="apis">
      < Apidata/> // this component import another page.
      </div>

</div>
    

  )
}

解决方法

我不确定你想做什么，但我会尽力帮助你

//import of Apidata
import React,{ useState } from "react";

const myFunc = () => {
    const [toggle,setToggle] = useState(false);

    const handleHideData = () => {
        setToggle(!toggle);
    };

    return (
        <div className="btn">
            <button id="veriGoster" onClick={handleHideData}>
                Show
            </button>

            {toggle && (
                <div className="apis">
                    <Apidata />
                </div>
            )}
        </div>
    );
};

export default myFunc;