ReactJS - Accessing Methods of Children (without using refs) - reactjs

Question

I am trying to access the methods of a children in the parent Component.
First I wanted to use refs instead of this.props.children, but refs are only accessable when using them IN my component.
When using this, it seems not to be possible:
<Parent>
<Child ref="testChild" />
</Parent>
In my Parent Component I am not able to access this.refs.testChild - because of this I have to access this component with this.props.children.
However: When accessing them with this.props.children I am not able to call methods of the child.
Example:
// Child.jsx
{
customMethod() {},
render() {... some stuff ...}
}
// Parent.jsx
{
callChildrenMethods() {
this.props.children.map((child)=>{
console.log(child.props); // Props Object
console.log(child.customMethod); // Undefined
});
},
render() {return(<div>{this.props.children}</div>)}
}
As you can see: The customMethod is undefined. Is there any simple way to access the methods ? The better way would be to access the children with refs but this is not possible in my case.

Answer 1

this.props.children is opaque, you should iterate using React.Children API. Anyways, here's a fiddle which uses some hackery to invoke the child methods -
https://jsfiddle.net/sukantgujar/4bffu7tw/3/
Basically you need to access the type object of the child which points to the wrapped component instance.
var child = React.Children.only(this.props.children),
childType = child.type,
childProto = child.type.prototype,
childName = childProto.constructor.displayName,
childMethod = childProto.someMethod;

Answer 2

You should let the child know through props:
var Child = React.createClass({
render: function() {
if(this.props.shouldRunChildrensMethod) {
this.childsMethod();
}
return (...);
}
});
var Parent = React.createClass({
getInitialState: function() {
return {
shouldRunChildrensMethod: false
}
},
callChildrenMethods: function() {
this.setState({
shouldRunChildrensMethod: true
});
},
render: function() {
return (
<Child shouldRunChildrensMethod={this.state.shouldRunChildrensMethod} />
);
}
});
You can also view 2 way binding:
https://facebook.github.io/react/tips/communicate-between-components.html
Though this communication will be individually 1 by 1 with each child to parent.