首页 > 其他分享 > React.cloneElement

React.cloneElement

时间:2023-02-13 23:57:56浏览次数:50  
标签:dom React props 组件 cloneElement children

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

  • 支持传入 children,并可以展示或者被覆盖掉
  • 支持传入的 props 包含自定义组件
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;

  

标签:dom,React,props,组件,cloneElement,children
From: https://www.cnblogs.com/yiyi17/p/17118317.html

相关文章