When you are building your React components, you’ll probably want to access child properties of the markup.
Parent can read its children by accessing the special this.props.children
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://fb.me/react-0.12.2.js"></script>
<script type="text/javascript" src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>
<script type="text/jsx">
var App = React.createClass({
render: function() {
return (
<Button>React <Heart /></Button>
);
}
});
var Button = React.createClass({
render: function() {
return(
<button>{this.props.children}</button>
);
}
});
var Heart = React.createClass({
render: function() {
return (
<span>Heart</span>
);
}
});
ReactDOM.render(<App />, document.body);
</script>
</body>
</html>
|
App has two children Button and Heart, all thoes children come thought from {this.props.children}.
So far go good, That’s it!!! See ya!!! :)