Skip to content

Instantly share code, notes, and snippets.

@kylpo

kylpo/block10.jsx Secret

Created Jun 21, 2017
Embed
What would you like to do?
class Cloning_ extends React.Component {
constructor() {
super()
console.log('Cloning Constructor')
}
componentDidMount() {
console.log('Cloning Mount')
}
render() {
console.log('Cloning Render')
const { children, ...propsToPass } = this.props
const child = React.Children.only(children)
return React.cloneElement(child, propsToPass)
}
}
class Div extends React.Component {
constructor() {
super()
console.log('Div Constructor')
}
componentDidMount() {
console.log('Div Mount')
}
render() {
console.log('Div Render')
return (
<div>{this.props.children}</div>
)
}
}
function createElement(label, component, props, children) {
console.log(`${label} element`)
return React.createElement(
component,
props,
children
)
}
export default class App extends React.Component {
render() {
/*
* <Cloning_ >
* <Div/>
* </Cloning_>
*/
return (
createElement(
'Cloning_',
Cloning_,
{hi: 'hi'},
createElement(
'Div',
Div,
null,
),
)
)
}
}
// elsewhere...
ReactDOM.render(
<App />,
document.getElementById('root')
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.