react提供的這個方法克隆組件的方法，可能我們在平常的開發中用的很少，主要可能是我們并不知道或者并不了解這個方法。因為我在之前react的children文章中用到過，所以我就進行了一系列的測試，發現真的非常的好用。我們同樣使用一些小的demo來介紹他的功能。

React.cloneElement()接收三個參數第一個參數接收一個ReactElement，可以是真實的dom結構也可以是自定義的。第二個參數返回舊元素的props、key、ref。可以添加新的props，第三個是props.children，不指定默認展示我們調用時添加的子元素。如果指定會覆蓋我們調用克隆組件時里面包含的元素。接下來我們開始測試

function CloneDemo(props){return React.cloneElement(<div/>,props,<p>這是一個克隆的元素</p>)
}
export default CloneDemo;

1.png

2.png

我先寫了一個最簡單的demo，克隆的元素div和給他添加的子元素p都正常展示了。接著測試他的功能，接著上面的例子

function CloneDemo(props){return React.cloneElement(<div/>,props,<p>這是參數傳入的元素</p>)
}
function ContainerBox(){return <CloneDemo><h1>這是在父組件添加的元素</h1></CloneDemo>
}
export default ContainerBox;

我對代碼進行了調整，增加了一個ContainerBox組件，并調用了克隆的元素，還給他添加了子元素，查看效果：

3.png

發現傳入的參數元素覆蓋了從父組件傳入的元素，導致h1標簽并沒有被渲染。因為平常開發我們寫公共組件可能從父組件傳入的比較多，所以下面的例子都不傳入第三個參數。

上面是直接渲染了一個div顯然這樣的寫法很不友好，可能我們想渲染一個p元素，一個a元素甚至是一個自定義的，上面的寫法顯然已經不支持了，下面進行修改：

function CloneDemo({dom=<div/>,...props}){return React.cloneElement(dom,{...props})
}
function ContainerBox(){return <CloneDemo dom={<p></p>}><h1>這是在父組件添加的元素</h1></CloneDemo>
}
export default ContainerBox;

給克隆組件傳入了一個dom，dom接收一個ReactElement，還給他賦予了一個默認值，如果沒傳入渲染div即可，我先給dom傳入了一個p元素查看頁面元素：

4.png

傳入的p元素正常顯示出來了。下來測試自定義的ReactElement看是否正常渲染

const Exam = (props) => <div>這是一個自定義的ReactElement元素{props.children}</div>
function CloneDemo({dom=<div/>,...rest}){return React.cloneElement(dom,{...rest})
}
function ContainerBox(){return <CloneDemo dom={<Exam style={{color: "red",textAlign: "center"}} />}><h1>這是在父組件添加的元素</h1></CloneDemo>
}
export default ContainerBox;

我創建了一個Exam組件，并將他傳給克隆組件，我們還給他加上了樣式查看效果：

5.png

可以正常顯示但是發現樣式并沒有生效，接下來處理樣式，主要需要兩部分的樣式，一部分是克隆的時候直接給的樣式，一個是傳入的組件的樣式，處理原則是如果樣式沖突，采用傳入的樣式。

const Exam = (props) => {return <div style={{...props.styles,...props.style}}>這是一個自定義的ReactElement元素{props.children}</div>
}
function CloneDemo({dom=<div/>, ...rest }){const styles = {color: "blue",minWidth: "1200px",margin: "100px auto",textAlign: "left"}return React.cloneElement(dom,{styles, ...rest})
}
function ContainerBox(){return <CloneDemo dom={<Exam style={{color: "red",textAlign: "center"}}  />}><h1>這是在父組件添加的元素</h1></CloneDemo>
}
export default ContainerBox;

我將CloneDemo中定義的styles，已經傳入Exam組件時給他定義的樣式都加到了Exam組件身上

6.png

繼續優化克隆組件

const Exam = (props) => {return <div style={{...props.style}}>這是一個自定義的ReactElement元素{props.children}</div>
}
function CloneDemo({dom=<div/>, ...rest }){const styles = {color: "blue",minWidth: "1200px",margin: "100px auto",textAlign: "left"}return React.cloneElement(dom,{style: Object.assign({}, styles, dom.props.style), //將傳入的樣式放到最后提高他的優先級...rest})
}
function ContainerBox(){return <CloneDemo dom={<Exam style={{color: "red",textAlign: "center"}}  />}><h1>這是在父組件添加的元素</h1></CloneDemo>
}
export default ContainerBox;

這樣在Exam組件中只需要傳入一個props.style樣式就可以了。