When you're building your React components, you'll probably want to access child properties of the markup.
In Angular, it is transcludion:
<div>
<ng-transculde></ng-transclude>
</div>
In React, it is:
{this.props.children}
It means, use whatever pass in my component:
import React from 'react'; export default class App extends React.Component {
render() {
return (
<Button>I <Heart /> React</Button>
)
}
} class Button extends React.Component{
render() {
return (
<button>{this.props.children}</button>
)
}
} const Heart = () => <span>Love</span>;
So we pass <Heart /> into Button component, so in Button component, we use {this.user.props}