2013-10-14 5 views
2

Я только что исследовал response.js, и я думаю, что это здорово, но у меня проблема. Вы не знаете, как визуализировать макет extjs с помощью React.js?React.js и ExtJS 4

Я знаю, что response.js предназначен для создания components, а не всего макета. Поэтому я думаю, что мне нужно сделать их относительными (действие ссылки между компонентами, такими как изменение кнопок, значение некоторого div с использованием текста из другого компонента ввода?)

Спасибо за любую идею.

ответ

2

распространять изменения до первого общего предка, который сохраняет значение в state и компонент, который использует значение получить его послал в через его props

т.е.

ColorChangeButton = React.createClass({ 
    render: function() { 
     return <button 
        onClick={this.props.onChangeColor} 
        className={this.props.color} /> 

    } 
}); 

ColoredDiv = React.createClass({ 
    render: function() { 
     return <div className={this.props.color} /> 
    } 
}); 

Container = React.createClass({ 
    getInitialState: function() { 
     return { color:"blue" } 
    }, 
    onChangeColor: function() { 
     this.setState({color:"red"}) 
    }, 
    render: function() { 
     return (
      <section> 
      <ColorChangeButton 
       color={this.state.color} 
       onChangeColor={this.onChangeColor} /> 
      <ColoredDiv color={this.state.color} /> 
      </section> 
     ) 
    } 
}) 
+1

Для будущих читателей: Если вы создаете большое приложение вместо того, чтобы распространяться, вы должны взглянуть на структуру приложения Flux с централизованными состояниями. – Dencker