問題
如何對組件的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對象即可。
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
