React组件如何增强子组件的children功能？

本文共计645个文字，预计阅读时间需要3分钟。

问题：如何对组件的children进行增强，例如：添加属性、绑定事件，而不是使用div{this.props.children}/div在div上进行处理。分析：今天在写组件时遇到了这个问题，在网上查阅了非常多资料，都说可行。

问题

如何对组件的children进行加强，如：添加属性、绑定事件，而不是使用<div>{this.props.children}</div>在<div>上进行处理。

前车之鉴

今天写组件遇到这个问题，在网上查阅了很多资料，都说可以使用React.cloneElement进行处理，但是结果并不是预期想要的。

先看看这个东西有什么用：

React.cloneElement(element, [props], [...childrn])

根据React官网的说法，以上代码等价于：

<element.type {...element.props} {...props}>{children}</element.type>

这么做其实也是给children包了一层标签，再对其进行间接处理，没有直接修改children。

如：

// App.jsx <Father> <div style={{ color: 'red' }} onClick={() => console.log('hello')}> demo </div> <Father>

我们希望在Father.jsx的内部将div转为inline-block。