• 
       
       
       




        1. 
             
              <nav id="ff867eef"></nav>
             
             
             
            
               
          狗万官网酒店 > 狗万官网下载 > React组件对子组件children开展加强的主意_javascript艺术

          React组件对子组件children开展加强的主意_javascript艺术

          来源: 2019-08-04 19:43 我来投稿 参与评论
          这篇文章主要给大家介绍了关于React组件中对子组件children开展加强的相关资料,文中通过示范代码介绍的独特详细,对大家学习或者使用React具有原则性的参考学习价值,要求的朋友们下面来累计学习学习吧

          题目

          如何对组件的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。按照网上的解法,是这样的:

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

          但是实际意义是这样的:

          <div style={{ dispaly: 'inline-block' }}>
           <div style={{ color: 'red' }} onClick={() => console.log('hello')}>
            demo
           </div>
          <div>

          哈!?子元素的父元素被设为了inline-block,和我们想要的<div>demo</div>把设为inline-block。结果与预期完全不同,简直大失所望!!!

          React.clone重点对不起它clone的名字!!!

          本人探索

          思路: jsx语法表示的因素只是react组件的一个语法糖。故而组件是对象。既然是对象我们就足以直接对人家进行修改。

          尝试在井台打印一个如下react组件:

          // this.props.children
          console.log(
           <div
            style={{ color: 'red' }}
            onClick={() => {
             console.log('hello');
            }}
           >
            demo
           </div>
          );

          如下:

          故而直接修改this.props.children即可:

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

          总结

          如何对组件的children开展直接加强,直接修改this.props.children目标即可。

          好了,上述就是这篇文章的方方面面内容了,瞩望本文的情节对大家的上学或者工作具有原则性的参考学习价值,谢谢大家对脚本的师之支持。

          义务编辑:狗万官网酒店
           
           
          0% (0)
           
           
          0% (0)
          机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
          地名: 匿名?