如何在 reactjs 中使用 onclick 事件渲染子组件?

Posted

技术标签:

【中文标题】如何在 reactjs 中使用 onclick 事件渲染子组件?【英文标题】:How to render child component with onclick event in reactjs? 【发布时间】:2020-04-07 05:43:58 【问题描述】:

我想在单击按钮时呈现子组件 父母

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

孩子

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

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

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

是 React 的概念吗?

以上是关于如何在 reactjs 中使用 onclick 事件渲染子组件?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ReactJS Typescript 中 2 分钟后自动发生 onclick

如何在innerHTML中使用onClick函数

无法使 onClick 在 ReactJS 中工作

ReactJS:如何通过反应正确播放带有 onClick 事件的 html5 视频?

调用多个函数 onClick ReactJS

Reactjs:在onClick方法中传递参数而不会造成性能损失[重复]