ну это уже проблема сервисного слоя а не UI-компонентов, нет?import React from 'react';
import {Component} from 'react';
export default class HorizontalNavigation extends Component{
constructor(props){
super(props)
}
render(){
return (
<div>
<Panel>
<ButtonGroup>
<ButtonLink>
<Link>push mi</Link>
</ButtonLink>
</ButtonGroup>
</Panel>
</div>
);
}
}<div>
<ul>
<li><a href=""></a></li>
</ul>
</div>import React from 'react';
import {Component} from 'react';
export default class HorizontalNavigation extends Component{
constructor(props){
super(props)
}
render(){
return (
<div>
<Panel>
<ButtonGroup>
<ButtonLink>
<Link>push mi</Link>
</ButtonLink>
</ButtonGroup>
</Panel>
</div>
);
}
}import React from 'react';
import {Component} from 'react';
export default class Panel extends Component{
constructor(props){
super(props)
}
render(){
return (
<div className="panel">{this.props.children}</div>
);
}
}import React from 'react';
import {Component} from 'react';
export default class ButtonLink extends Component{
constructor(props){
super(props)
}
render(){
return (
<li className="button-link">{this.props.children}</li>
);
}
}import React from 'react';
import {Component} from 'react';
import Event from './../Event';
export default class Link extends Component{
constructor(props){
super(props)
}
static propTypes = {
link: React.PropTypes.string
};
a_clickHandler(event){
event.preventDefault();
}
render(){
return <a href={this.props.link} onClick={this.a_clickHandler}>{this.props.children}</a>;
}
}Концепция MVC позволяет разделить данные, представление и обработку действий пользователя на три отдельных компонента:
Модель (англ. Model). Модель предоставляет знания: данные и методы работы с этими данными, реагирует на запросы, изменяя своё состояние. Не содержит информации, как эти знания можно визуализировать.
Представление, вид (англ. View). Отвечает за отображение информации (визуализацию). Часто в качестве представления выступает форма (окно) с графическими элементами.
Контроллер (англ. Controller). Обеспечивает связь между пользователем и системой: контролирует ввод данных пользователем и использует модель и представление для реализации необходимой реакции.
Важно отметить, что как представление, так и контроллер зависят от модели. Однако модель не зависит ни от представления, ни от контроллера. Тем самым достигается назначение такого разделения: оно позволяет строить модель независимо от визуального представления, а также создавать несколько различных представлений для одной модели.
Для реализации схемы Model-View-Controller используется достаточно большое число шаблонов проектирования (в зависимости от сложности архитектурного решения), основные из которых «наблюдатель», «стратегия», «компоновщик»[6].
Наиболее типичная реализация отделяет вид от модели путем установления между ними протокола взаимодействия, используя аппарат событий (подписка/оповещение). При каждом изменении внутренних данных в модели она оповещает все зависящие от неё представления, и представление обновляется. Для этого используется шаблон «наблюдатель». При обработке реакции пользователя представление выбирает, в зависимости от нужной реакции, нужный контроллер, который обеспечит ту или иную связь с моделью. Для этого используется шаблон «стратегия», или вместо этого может быть модификация с использованием шаблона «команда». А для возможности однотипного обращения с подобъектами сложно-составного иерархического вида может использоваться шаблон «компоновщик». Кроме того, могут использоваться и другие шаблоны проектирования, например, «фабричный метод», который позволит задать по умолчанию тип контроллера для соответствующего вида.