React.cloneElement

React.cloneElement()接收三个参数第一个参数接收一个ReactElement，可以是真实的dom结构也可以是自定义的。第二个参数返回旧元素的props、key、ref。可以添加新的props，第三个是props.children，不指定默认展示我们调用时添加的子元素。如果指定会覆盖我们调用克隆组件时里面包含的元素。

需求是开发一个组件

• 支持传入 children，并可以展示或者被覆盖掉
• 支持传入的 props 包含自定义组件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

import React from 'react' import { PageContainer } from '@ant-design/pro-layout';     const Exam = (props) => <div style={{...props.style}}>这是{props.children}111</div>   function CloneDemo({dom=<div/>,...props}) {   return React.cloneElement(dom, {...props}) }       const Menu = () => {   return (     <PageContainer>        <CloneDemo dom={<Exam style={{color: 'red'}}></Exam>}><h1>kkkkkk</h1></CloneDemo>     </PageContainer>   ); };   export default Menu;