通过按钮显示和隐藏表，单击React

Question

基本上，我有3张桌子，这些表的顶部有3个标题。每次单击此标题时，我都希望隐藏该表并将其显示回来。我怎样才能做到这一点？

我给每个标题添加了一个点击按钮，但是我不能只隐藏属于这个按钮的表，它隐藏了所有的表吗？保持在明朝，它们都是经过渲染的。

是否有任何方法可以找到按钮的索引与表的索引是否匹配，然后是display: none;之类的？我试着用dom.querySelectorAll做这件事，并通过数组映射，但它隐藏了一切。

Answer 1

使用useState设置数组

tables = [true,true,true]

只显示索引为真的表。返回()中的示例

{tables[0] ? <Table1/> : null}
{tables[1] ? <Table2/> : null}{tables[2] ? <Table3/> : null}

然后，使用onClick设置表数组的状态。来动态地呈现表。例如。onClick={()=>将表索引设置为false}

Answer 2

尝尝这个

  const [table1, settable1] = useState(true);
  const [table2, settable2] = useState(true);
  const [table3, settable3] = useState(true);

async function table1(){
settable1(!table1)
           }

async function table2(){
settable2(!table2)
           }
async function table3(){
settable3(!table3)
           }


return (
{table1== true ? <Table1/> : null}
{table2== true ? <Table1/> : null}
{table3== true ? <Table1/> : null}
)