Показать сообщение отдельно
  #1 (permalink)  
Старый 18.10.2014, 00:26
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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?

Последний раз редактировалось melky, 18.10.2014 в 00:53.
Ответить с цитированием