Есть 2 компонента:
/** @jsx React.DOM */
var Parent = React.createClass({
render: function() {
return <div>
Parent!
{this.props.children}
</div>;
}
});
var Child = React.createClass({
hello: function () {
alert("C'MON!");
},
render: function() {
return <div>
Child!
</div>;
}
});
Один (Child) вложен в другой (в Parent).
<Parent>
<Child ref="myref" />
</Parent>
Ownee имеет ref "myref".
Хочу в owner'е вызвать метод компонента ownee.
Для этого мне нужно получить компонент через refs и вызвать его метод.
Нет проблем!
// Внутри Parent :
this.refs.myref.hello();
типа такого:
<Parent>
<Child ref="myref" />
<button onClick={this.refs.myref.hello}>Go!</button>
</Parent>
Но на этапе render объект this.refs - пустой (undefined). Ну - и будет ошибка.
Это можно обойти, сделав фасадный метод внутри компонента, который оборачивает оба:
// createComponent:
proxyHello: function () {
this.refs.myref.hello();
},
render: function() {
return (
<Parent>
<Child ref="myref" />
<button onClick={this.proxyHello}>Go!</button>
</Parent>
);
}
// ...
Тогда на этапе render будет получен метод this.proxyHello, а вызываться он будет, когда уже всё отрисовано - this.refs.myref будет существовать.
Где я это делаю и зачем:
У меня есть компонент модального окна и я хочу его таким образом красиво скрыть.
Да, не спорю, можно было бы заслать делегата (функцию) в props и передавать ему его же состояние открытости\скрытости:
var Parent = React.createClass({
getInitialState: function () {
return {
modalIsHidden: false
};
},
hideModal: function () {
this.setState({
modalIsHidden: true
});
},
render: function () {
return (
{/* onHideButtonClick - кликнули по крестику для закрытия окна */}
<Modal hidden={this.state.modalIsHidden} onHideButtonClick={this.hideModal} />
);
}
});
Но хочется сделать красиво и спрятать это в компоненте-контроллере!
Вопросы 
:
но как это сделать без создания дополнительного метода в Parent?
или я вообще не понял нифига суть React и должен идти читать про
one-way data flow?
