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

Question

我有一个按钮。当点击按钮时，我想显示表格，当再次点击时，我想要隐藏数据。第一数据visible = false

Jsx文件无法识别状态。

我试图隐藏的div块名称是api。

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>
  )
}

Answer 1

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

//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;