[React Fundamentals] Accessing Child Properties

时间:2021-10-27 08:20:33

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}