如何在单击一次按钮时呈现另一个反应组件？（功能组件）

【问题标题】：How to render another react component on a single button click? (Functional Component)如何在单击一次按钮时呈现另一个反应组件？（功能组件）
【发布时间】：2021-01-05 05:15:20
【问题描述】：

我对 React 很陌生，我想通过单击呈现另一个 React 组件。我有一个组件 ListModules，其中有一个按钮，现在当我单击该按钮时，应该呈现另一个组件。我写了下面的代码，模块是我的状态，并且具有来自后端的价值。

    const addTimeline = () => {
      return <ColorsTimeline data={module} />
      }
     <button type="submit" class="btn btn-success" onClick={addTimeline}>DONE</button>

请帮忙:)

【问题讨论】：

标签： javascript reactjs react-props

【解决方案1】：

这应该可行：

const[show,setShow]=useState(false);
return(
{show?<ColorsTimeline data={module} />:null}
<button type="submit" class="btn btn-success" onClick={()=>{setShow(true)}}>DONE</button>
)

编辑：如果您想在按钮被点击后隐藏它？单击按钮，调用另一个组件并隐藏按钮！例如：

const [showButton,setShowButton]=useState(true);
return(
  {show?<ColorsTimeline data={module} />:null}
  {showButton?<button type="submit" class="btn btn-success" onClick={()=>{setShow(true);setShowButton(false)}}>DONE</button>:null}
)

或者最好这样做：

return(
  {show?<ColorsTimeline data={module} />:null}
  {!show?<button type="submit" class="btn btn-success" onClick={()=>{setShow(true)}}>DONE</button>:null}
)

【讨论】：