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

Question

我有一个按钮。单击按钮时，我想显示 table ，再次单击时我想隐藏数据。第一条数据visible = 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>
  )
}

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;

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

How to show and hide react .tsx file?

html

show

hide

typescript

reactjs