javascript - React - Rxjs：在流中转换父组件事件处理程序

Question

给定父组件呈现以下内容：

const handleButtonClick = (e) => {
 //code omitted
}
<ChildComponent
 handleButtonClick={handleButtonClick} 
/>

以及将此处理程序添加到按钮的子组件：

const ChildComponent = (props) => {
  const handleButtonClick = props.handleButtonClick

  return (
    <button onClick={handleButtonClick}>Click me!</button>
  )

}

如何在 Rxjs 流的父级中转换 handleButtonClick？

我想到了一种方法，那就是创建一个主题：

const clickStream = new Subject()

const handleButtonClick = (e) => {
 clickStream.next(e)
}

我也对如何在父级呈现多个动态子级的情况下执行此操作感兴趣，例如：

return(
  <>
   {
     children.map((child, index) => {
        <ChildComponent handleButtonClick={handleButtonClick}/> 
     })
   }
  </>
)

标签： javascriptreactjsrxjs