强化孩子的方法 React组件的一个子组件

问题

如何加强组件的子组件，比如添加属性和绑定事件，而不是用div{this.props.children}/div在div上处理。

一个人的错误是另一个人的教训。

今天写作部分遇到了这个问题，网上查阅了很多资料，说可以用React.cloneElement处理，但是结果出乎意料。

我们先来看看这个东西有什么用：

根据React官网显示，上述代码相当于：

元素。类型{.元素。道具{ }.道具} { children }/元素。type实际上为子级包装了一个标签，然后在不直接修改子级的情况下间接处理它。

例如：

//app.jsx父亲div style={ { color : ' red ' } } onclick={()=console . log(' hello ')} demo/div父亲我们希望把div变成父亲. jsx内部的内联块根据网上的做法，是这样的：

//父亲. jsx const son=react . clone element(this . props . children，{ style : { display : ' inline-block ' })，但实际效果如下：

div style={ { display 3360 ' inline-block ' } } div style={ { color : ' red ' } } onclick={()=console . log(' hello ')} demo/div！子元素的父元素设置为内联块，我们想要的divdemo/div设置为内联块。结果和预期完全不一样，令人失望！

React.clone为它的克隆名感到抱歉！

自我探索

想法：jsx语法表示的元素只是react组件的语法糖。所以组件就是对象。既然是对象，我们可以直接修改。

尝试在控制台上打印以下react组件之一：

//this . props . children console . log(div style={ { color : ' red ' } } OnClick={()={ console . log(' hello ')；} } demo/div)；如下所示：

因此，直接修改this.props.children:

//父辈. Father.jsxconst { children }=this.propsConstson={.儿童，props:孩子们。道具，冷静.孩子们。style，display:' inline-block'}，ontransationend :()={ console . log(' hello world ')

如何直接加强组件的子对象，直接修改this.props.children对象即可。

好了，这就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。