A top-level App
component returns <Button />
from its render()
method.
-
What is the relationship between
<Button />
andthis
in thatButton
’srender()
? -
Does rendering
<Button><Icon /></Button>
guarantee that anIcon
mounts? -
Can the
App
change anything in theButton
output? What and how?
The App component's render method returns a Button Element, which is not the same as Button Component class. This Button element instance has this structure -
When the element is actually mounted, React will use this information to create a Button Component class instance, which will be the value of
this
inside the Button Component'srender
.The will be mounted if App has mounted Button and the
render
of Button returns{this.props.children}
.Yes, App can change what Button renders through props, or using a HOC on it.