Я пытаюсь создать компонент вкладки. TabsSwitcher и TabsPanel должны быть отдельными компонентами, чтобы их можно было использовать в любом месте DOM, например. TabsSwitcher не должен следовать TabsPanel.
Чтобы заставить его работать, мне нужно как-то соединить эти компоненты. Кроме того, TabsSwitcher должен иметь возможность сообщить TabsPanel, когда была нажата вкладка.
/** @jsx React.DOM */
var TabsExample = React.createClass({
render: function() {
var tabs = [
{title: 'first', content: 'Content 1'},
{title: 'second', content: 'Content 2'}
];
return <div>
<TabsSwitcher items={tabs}/>
<TabsContent items={tabs}/>
</div>;
}
});
var TabsSwitcher = React.createClass({
render: function() {
var items = this.props.items.map(function(item) {
return <a onClick={this.onClick}>{item.title}</a>;
}.bind(this));
return <div>{items}</div>;
},
onClick: function(e) {
// notify TabsContent about the click
}
});
var TabsContent = React.createClass({
render: function() {
var items = this.props.items.map(function(item) {
return <div>{item.content}</div>;
});
return <div>{items}</div>;
}
});
React.renderComponent(
<TabsExample/>,
document.body
);
Каков наилучший способ сделать это?
Решение: http://jsfiddle.net/NV/5YRG9/