javascript - 如何在reactjs中使用onclick事件渲染子组件？

Question

我想在单击按钮时渲染子组件
家长们

const Parents:React.FC<PropTypes> = ({inputs}) => {
  return(
    <div>
      <Button onClick={() => <Child props={inputs}/>}
    </div>
   )}

child

const Child:React.FC<AnotherPropTypes> = ({props}) => {
  // ... 
}

我正在使用 React、TypeScript 和 Material-UI。
我的问题是，它似乎不像 onClick 事件触发子组件。单击按钮时如何运行子组件？
任何帮助表示赞赏!

Answer 1

向您的组件添加状态。点击事件设置状态，状态用来决定是否渲染额外的东西。

const Parents:React.FC<PropTypes> = ({inputs}) => {
  const [showChild, setShowChild] = useState(false);
  return(
    <div>
      <Button onClick={() => setShowChild(true)} />
      {showChild && <Child props={inputs}/>}
    </div>
  )
}