React Component to the sub-component Children to enhance the method

  • 的头像-Tumi
  • 44 day agopublish


How to strengthen the Children’s Children, such as: add attributes, binding events, not using

{this.props.children}

Processing on

.

Today, write components encountered this problem. I have an online online, saying that I can use React. CloneElement to process, but the result and Not expected.

What is used here:

React.cloneElement (Element, [Props], [… ChildRN])
   According to the REACT official website, the above code is equivalent to: 

{children}
    This is actually a layer of label for Children, and then indirectly, and does not directly modify Children.  
// app.jsx

console.log (‘Hello’)}> demo

  We hope to turn DIV to Inline-block inside Father.jsx. According to the Internet, it is:  
// father.jsxconst Son = React.cloneElement (this.props.children, {style: {DISPLay: 'Inline-block'}}
But the actual effect is this:

 Console.log ('Hello')}> Demo   
Ha! ? The parent element of the child is set for inline-block, and

Demo

we want is set to Inline-block. The results are completely different from expected, and it is very disappeared! ! !
React.clone is correct to the name of its Clone! ! !
  Self-exploration 
Idea: The elements of JSX syntax represents only a syntax of the React component. So the component is an object. Since it is an object, we can modify it directly.
Try to print a React component in the console:

// this.props.childrenconsole.log (

{console.log (‘ Hello ‘);}}> DEMO

);


So directly modify the THIS. Props.children:

// father.jsxconst {children} = this.props; const Son = {… Children, Props: {… children .props, dispaly: {… childrEn.Style, Display: ‘Inline-block’}, ontransitionnd: () => {Console.log (‘Hello World’)}}}
  
Summary
How to directly strengthen the children of the component, directly modify this.props.children object.
Ok, the above is the full content of this article. I hope this paper has a certain reference value for everyone’s study or work, thank you for your support of Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment