React组件对子组件children进行加强的方法

前端  /  管理员 发布于 4年前   528

问题

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

前车之鉴

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

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

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

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

{children}

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

如：

// App.jsx 
 console.log('hello')}>  demo 

我们希望在Father.jsx的内部将div转为inline-block。按照网上的做法，是这样的：

// Father.jsxconst Son = React.cloneElement( this.props.children, {  style: {   display: 'inline-block'  } })

但是实际效果是这样的：

 
 console.log('hello')}>  demo 

哈！？子元素的父元素被设为了inline-block，和我们想要的demo被设为inline-block。结果与预期完全不同，简直大失所望！！！

React.clone根本对不起它clone的名字！！！

自我探索

思路： jsx语法表示的元素只是react组件的一个语法糖。所以组件是对象。既然是对象我们就可以直接对其进行修改。

尝试在控制台打印一个如下react组件：

// this.props.childrenconsole.log( 
 {   console.log('hello');  }} >  demo );

如下：

所以直接修改this.props.children即可：

// Father.jsxconst { children } = this.props;const Son = { ...children, props: {   ...children.props,  dispaly: {   ...children.style,   display: 'inline-block'  },  onTransitionEnd: () => { console.log('hello world') } }}

总结

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

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

您可能感兴趣的文章:

• react 父组件与子组件之间的值传递的方法
• React 子组件向父组件传值的方法
• React通过父组件传递类名给子组件的实现方法
• React父子组件间的传值的方法
• react.js 父子组件数据绑定实时通讯的示例代码
• react 父子组件之间通讯props
• 详解React之父子组件传递和其它一些要点
• React优化子组件render的使用
• react 中父组件与子组件双向绑定问题