var Tabs = React.createClass({
render : function () {
return (
<div id="tb">
<ul>
<li><a href='#tabs-1'>Эконом</a></li>
<li><a href='#tabs-2'>VIP</a></li>
<li><a href='#tabs-3'>Минивен</a></li>
</ul>
<section className='tabs-content'>
<article id='tabs-1'>1</article>
<article id='tabs-2'>2</article>
<article id='tabs-3'>3</article>
</section>
</div>
);
}
});
ReactDOM.render(
<Tabs />,
document.getElementById('tabs_content')
);class Tabs extends React.Component {
constructor() {
super()
this.state = {tabIndex: 0}
}
render() {
return (
<div id="tb">
<ul role="tablist">
<li role="presentation" onClick={() => this.setState({tabIndex: 0})}></li>
<li role="presentation" onClick={() => this.setState({tabIndex: 1})}></li>
<li role="presentation" onClick={() => this.setState({tabIndex: 2})}></li>
</ul>
<section className='tabs-content'>
{() => this.state.tabIndex === 0 ? <article>1</article> : null}
{() => this.state.tabIndex === 0 ? <article>2</article> : null}
{() => this.state.tabIndex === 0 ? <article>3</article> : null}
</section>
</div>
);
}
}
ReactDOM.render( <Tabs />, document.getElementById('tabs_content'));
<article/>. Никаких ссылок, никаких role, никаких tabindex.var Tabs = React.createClass({
constructor() {
this.state = {tabIndex: 0}
}
render : function () {
return (
<div id="tb">
<ul role="tablist">
<li role="presentation" onClick={() => this.setState({tabIndex: 0})}></li>
<li role="presentation" onClick={() => this.setState({tabIndex: 1})}></li>
<li role="presentation" onClick={() => this.setState({tabIndex: 2})}></li>
</ul>
<section className='tabs-content'>
{() => this.state.tabIndex === 0 ? <article>1</article> : null}
{() => this.state.tabIndex === 0 ? <article>2</article> : null}
{() => this.state.tabIndex === 0 ? <article>3</article> : null}
</section>
</div>
);
}
});
ReactDOM.render(
<Tabs />,
document.getElementById('tabs_content')
);
Простой
Средний
