Reactjs 单击按钮时在子元素中不显示任何内容react

发布于02月23日

当我点击按钮时，如何在测试组件中显示无.

function Teste({testeA,testeB}) {

    return <div> {testeA} - {testeB} </div> 
}

export default function Simulacao() {
 
    return <>
            <button onClick=""/>
            <Teste testeA="aaa" testeB="bbb"/>
            <Teste testeA="ccc" testeB="ddd"/>
        </>
}

我理解在Reaction中构建组件并重用它们的概念，但我在处理事件方面遇到了困难.

推荐答案

如果你想用css来隐藏它们，你可以按照下面的方法来做.如果show为FALSE，也可以返回<></>:

import { useState } from "react";

function Teste({ testeA, testeB, show = true }) {
  return (
    <div style={{ display: show ? "block" : "none" }}>
      {testeA} - {testeB}
    </div>
  );
}

export default function Simulacao() {
  const [showTeste, setShowTeste] = useState(true);
  return (
    <>
      <button
        onClick={() => {
          setShowTeste((showTeste) => !showTeste);
        }}
      >
        Toggle
      </button>
      <Teste testeA="aaa" testeB="bbb" show={showTeste} />
    </>
  );
}