var Parent2 = React.createClass({
componentDidMount: function() {
//access to <span>test</span>, if only one child no array used
console.log(this.props.children.props.children);
//would log child2text, because I am grabbing the child of the <span>
console.log(this.props.children.props.children);
},
render: function() {return <div />;}
});
var Parent = React.createClass({
componentDidMount: function() {
//access to array, containing <div>test</div><div>test</div>
console.log(this.props.children);
//would log childtext, because I am grabbing the child of the first <div> in the array
console.log(this.props.children[1].props.children);
},
render: function() {return <Parent2><span>child2text</span></Parent2>;}
});
ReactDOM.render(
<Parent><div>child</div><div>childtext</div></Parent>,
document.getElementById('app')
);
The Parent2 componentDidMount comments do not correctly document the results. I get:
page has changed Object
embedded:9 child2text
embedded:12 child2text
embedded:20 [Object, Object]0: Object1: Objectlength: 2proto: Array[0]
embedded:23 childtext
in my console. I'm not exactly sure what your intentions were with it, but one possible correction is:
var Parent2 = React.createClass({
componentDidMount: function() {
//access to object containing <span>child2text</span>, if only one child no array used
console.log(this.props.children);
//would log child2text, because I am grabbing the child of the <span>
console.log(this.props.children.props.children);
},
render: function() {return <div />;}
});
In basic-react-components/6.8.html, there's a jsfiddle to https://jsfiddle.net/codylindley/s3v614b3/#tabs=js,result,html,resources with:
The Parent2 componentDidMount comments do not correctly document the results. I get: page has changed Object embedded:9 child2text embedded:12 child2text embedded:20 [Object, Object]0: Object1: Objectlength: 2proto: Array[0] embedded:23 childtext in my console. I'm not exactly sure what your intentions were with it, but one possible correction is: