問題
如何對組件的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.jsxconst 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。結果與預期完全不同，簡直大失所望！?。?/p>
React.clone根本對不起它clone的名字?。?！
自我探索
思路： jsx語法表示的元素只是react組件的一個語法糖。所以組件是對象。既然是對象我們就可以直接對其進行修改。
嘗試在控制臺打印一個如下react組件：
// this.props.childrenconsole.log( <div style={{ color: 'red' }} onClick={() => { console.log('hello'); }} > demo </div>);如下：
所以直接修改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對象即可。
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對VeVb武林網的支持。
新聞熱點
疑難解答
