Question

我希望抽象出事件侦听器在子组件上的绑定。或允许组件更改儿童道具。

我想像这样在JSX中表达组件

<DocumentScreen name="Type">
  <DocumentInput value="L" name="(=learner)" icon="lerners.svg" />
  <DocumentInput value="P" name="(=probationary)" icon="probationary.svg" />
  <DocumentInput value="Full" icon="full.svg" />
</DocumentScreen>

这是增强的单选或复选框分组。

现在，我想增强输入以自动通知父组件存储状态的更改。

我希望这是可能的

{React.Children.toArray(this.props.children).map((Child => (<Child onClick={() => console.log("yea!")} />)))}

或更简单地

{this.props.children.map((Child => (<Child onClick={() => console.log("yea!")} />)))}

但是我遇到打字错误

JSX element type 'Child' does not have any construct or call signatures

使用

"react": "^16.8.6",
"typescript": "^3.5.2"

这是否可行，或者还有另一种方法可以实现？

Answer 1

您可以使用cloneElement

https://reactjs.org/docs/react-api.html#cloneelement

render() {
        return (
          <div>
          {React.Children.map(this.props.children, child => {
            return React.cloneElement(child, {
                onClick : () => console.log("yea!")
            })   
         })}
         </div>
       ) 
}

增强/操纵儿童道具的反应

1 个答案: