REACT, BEACH. Вызов метода Ownee внутри Owner
 

Есть 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?

Вот еще способ в голову пришёл, тоже уродливый :)

передавать в обработчик прокси

// Это в  'render'  компонента
<button onClick={function () { this.refs.modal.hide() }.bind(this)}>
    Hide # {this.props.id}
</button>

впринципе, это дело можно пустить по пути вычисления снаружи вывода:

render: function () {

    var hideModal = function () {
        this.refs.modal.hide()
    }.bind(this);

    return (
        <button onClick={}.bind(this)}>
            Hide # {this.props.id}
        </button>
        );
}

или использовать ES6 Arrow func:

render: function () {

    var hideModal = () => this.refs.modal.hide()
    
    return (
        <button onClick={hideModal}>
            Hide # {this.props.id}
        </button>
        );
}

Если кто-нибудь подскажет более путёвое, буду благодаарен :)

Здравствуйте грабли!

Та же лажа. ref в ребенке, а вызов нужен в родителе.

В итоге плюнул в ref, записал все в state и нольПроблемо заработало.