38 lines
1.3 KiB
Markdown
38 lines
1.3 KiB
Markdown
Props.children
|
||
|
||
|
||
|
||
My simple explanation of what this.props.children does is that it is used to display whatever you include between the opening and closing tags when invoking a component.
|
||
|
||
A simple example:
|
||
|
||
Here’s an example of a stateless function that is used to create a component. Again, since this is a function, there is no this keyword so just use props.children
|
||
```jsx
|
||
const Picture = (props) => {
|
||
return (
|
||
<div>
|
||
<img src={props.src}/>
|
||
{props.children}
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
This component contains an <img> that is receiving some props and then it is displaying {props.children}.
|
||
|
||
Whenever this component is invoked, {props.children} will also be displayed and this is just a reference to what is between the opening and closing tags of the component.
|
||
|
||
```jsx
|
||
//App.js
|
||
render () {
|
||
return (
|
||
<div className='container'>
|
||
<Picture key={picture.id} src={picture.src}>
|
||
//what is placed here is passed as props.children
|
||
</Picture>
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
Instead of invoking the component with a self-closing tag <Picture /> if you invoke it with full opening and closing tags <Picture> </Picture> you can then place more code between it.
|
||
|
||
This de-couples the <Picture> component from its content and makes it more reusable.
|