Function as Child Component
#
What is Function as Child Component?A Function as child component is a pattern that lets you pass a render function to a component as the children prop so you can change what you can pass as children to a component.
#
UsageWhen you use a Function as child component, instead of passing JSX markup, you assign children as a function.
And the Foo
component would look something like this.
#
For examplesLet take a look at a advanced example of a Function as child component.
And then you could use it as.
As you can see above, children is "overloaded" and passed to PageWidth
as a function instead of being a ReactNodeList
as nature intended. The PageWidth
component's render method calls this.props.children
(passing it width), which returns rendered JSX.
The real power of render callbacks can be seen in this example. PageWidth
will do all of the heavy lifting, while exactly what is rendered can change, depending on the render function that is passed.