如何显示和隐藏反应 .tsx 文件？答案

【问题标题】：How to show and hide react .tsx file?如何显示和隐藏反应 .tsx 文件？
【发布时间】：2021-07-22 08:16:27
【问题描述】：

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

【问题讨论】：

嗨，你的州在哪里？
当我写状态时我无法定义状态我看到找不到名称'state'.ts(2304)
什么？你导入 useState 表单了吗？
imgur.com/xHJXLcR 我不能使用 class x extends Component 我猜这是未定义的方式

标签： html reactjs typescript hide show

【解决方案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;

【讨论】：

谢谢。这正是我想要的