Reactjs 单击按钮时在父组件和子组件之间切换的正确方法

我是新来的。我正在尝试创建一个CRUD数据表。我的父组件中有一个数据表。以及可重用的弹出组件和数据输入表单组件，它们具有将数据添加到表中的所有输入。当前输入表单显示在弹出窗口内。在某些情况下，我需要在同一窗口中显示输入，而不是显示弹出窗口。基本上隐藏数据表并显示输入表单

这是我目前的代码：

父组件-表（我简化了代码）

从“/CommonTableForm”导入CommonTableForm
从“../PopupComponent”导入弹出窗口；
const[openPopup，setOpenPopup]=useState（false）
const[isUsingPopup，setIsUsingPopup]=useState（{false}）
渲染(
//添加新按钮和数据表
setOpenPopup（true）}>添加新

全名
电子邮件
//弹出组件在这里
//输入字段表单组件
)

CommonTableForm组件具有表单和输入

弹出组件具有弹出模式代码

当使用Popup=false时，CommonTableForm组件应显示在同一页面中。但最初它必须隐藏起来。在添加新按钮时，单击表格必须隐藏，CommonTableForm组件应显示

单击添加新按钮时，禁用弹出窗口并隐藏数据表本身，然后显示CommonTableForm组件的最佳方式是什么？

---

我可以使用React Router进行此操作吗？

我在此类场景中看到的一种常见模式是条件渲染：

render(){
if (check of showing on same View){
        return(
    //Input field form Component
    <CommonTableForm 
      someDataPassHere={data}/>
      )
}
if (check for showing on pop up){
        return(
        <>
        <Popup
            title="Add Data"
            openPopup={openPopup}
            setOpenPopup={setOpenPopup}
        >
            //Input field form Component
            <CommonTableForm 
            someDataPassHere={data}/>
        </Popup>
        </>
      )
}

render（）{
if（检查在同一视图上的显示）{
返回(
//输入字段表单组件
)
}
如果（检查弹出窗口是否显示）{
返回(
//输入字段表单组件
)
}

您可以添加三元运算符，并最初返回null和要单击的组件按钮：

   <div className="row">
      { //Check if button clicked
        (this.state.clicked)
          ? <CommonTableForm someDataPassHere={data}/>
          : null 
      }
    </div>

{//检查是否单击了按钮
（this.state.clicked）
? 
：null
}

最初必须隐藏CommonTableForm组件。如何隐藏表格并在单击按钮时显示CommonTableForm组件？感谢您的回答。如果有帮助，我又添加了一个片段，它可以帮助您解决问题

   <div className="row">
      { //Check if button clicked
        (this.state.clicked)
          ? <CommonTableForm someDataPassHere={data}/>
          : null 
      }
    </div>