React the magic of react. CloneElement ()

Recently, when I was reconstructing the project, I saw this method written by my predecessor, so I looked for information on the Internet and decided to record it.

React provides a way to clone components. We may not use this method in normal development because we are not aware of it. Conducted a series of tests, found really very good. We’ll also use some small demos to illustrate its functionality.

React.cloneelement () takes three arguments. The first parameter receives a ReactElement, which can be a real DOM structure or a custom one. The second parameter returns props, key, and ref of the old element. We can add new props, and the third is props. Children, without specifying the default to show the child element we added when we called it. If specified, the element contained in the clone component will be overridden. Let’s start testing.

function CloneDemo(props){
  return React.cloneElement(<div/>,props,<p>This is a clone of the element</p>)}export default CloneDemo;
Copy the code

demo

First, I wrote a simple demo. The cloned element div and the child p added to it all worked. Then test its functionality, following the example above

function CloneDemo(props){
  return React.cloneElement(<div/>,props,<p>This is the element passed in as the parameter</p>)}function ContainerBox(){
  return <CloneDemo><h1>This is the element added to the parent component</h1></CloneDemo>
}
export default ContainerBox;
Copy the code

I tweaked the code to add a ContainerBox component, called the clone element, and added child elements to it.

Found that the passed parameter element overwrites the element passed from the parent component, causing the H1 tag not to be rendered. The following examples do not pass in a third parameter because we usually write common components that are passed in from the parent.

The custom

Render a div, render a p element, render an A element, render a custom div, render a p element, render an A element, render a custom div, render a p element, render an a element, render a custom div.

function CloneDemo({dom=
       
,... props}){
  returnReact.cloneElement(dom,{... props}) }function ContainerBox(){
  return <CloneDemo dom={<p></p>} ><h1>This is the element added to the parent component</h1></CloneDemo>
}
export default ContainerBox;
Copy the code

We pass a DOM to the clone component, which receives a ReactElement and assigns it a default value. If we don’t pass a render div, we pass a P element to the DOM to look at the page element:

The p element passed in displays normally. Test the custom ReactElement to see if it renders properly

const Exam = (props) = > <div>This is a custom ReactElement element {props. Children}</div>
function CloneDemo({dom=
       
,... rest}){
  returnReact.cloneElement(dom,{... rest}) }function ContainerBox(){
  return <CloneDemo dom={<Exam style={{color: "red",textAlign: "center}} "/ >} ><h1>This is the element added to the parent component</h1></CloneDemo>
}
export default ContainerBox;
Copy the code

I created an Exam component and passed it to the clone. We also styled it to see what it looked like:

Could display normally but found that the style did not work.

The next step is to deal with styles. There are two main styles, one is the style given directly when cloning, and one is the style of the component passed in. The handling principle is to use the style passed in if the styles conflict.

const Exam = (props) = > {
  return <div style={{... props.styles,... props.style}}>This is a custom ReactElement element {props. Children}</div>
}
function CloneDemo({dom=
       
, ... rest }){
  const styles = {
    color: "blue".minWidth: "1200px".margin: "100px auto".textAlign: "left"
  }
  returnReact.cloneElement(dom,{styles, ... rest}) }function ContainerBox(){
  return <CloneDemo dom={<Exam style={{color: "red",textAlign: "center}} "/ >} ><h1>This is the element added to the parent component</h1></CloneDemo>
}
export default ContainerBox;
Copy the code

I added the styles defined in CloneDemo to the Exam as they were passed in

Continue to optimize the clone components

const Exam = (props) = > {
  return <div style={{... props.style}}>This is a custom ReactElement element {props. Children}</div>
}
function CloneDemo({dom=
       
, ... rest }){
  const styles = {
    color: "blue".minWidth: "1200px".margin: "100px auto".textAlign: "left"
  }
  return React.cloneElement(dom,{
    style: Object.assign({}, styles, dom.props.style), // Put the incoming style last to increase its priority. rest }) }function ContainerBox(){
  return <CloneDemo dom={<Exam style={{color: "red",textAlign: "center}} "/ >} ><h1>This is the element added to the parent component</h1></CloneDemo>
}
export default ContainerBox;
Copy the code

All you need to do is pass in a props. Style style in the Exam component.

Civil turn