blob: f251bd35548f5452952c47c25d324cd57be20fa0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
API: `ActiveState` (mixin)
==========================
A mixin for components that need to know about the routes, params, and
query that are currently active (like links).
Static Methods
--------------
### `isActive(routeName, params, query)`
Returns `true` if a route, params, and query are active, `false`
otherwise.
Lifecycle Methods
-----------------
### `updateActiveState`
Called when the active state changes.
Example
-------
Let's say you are using bootstrap and want to get `active` on those `li`
tags for the Tabs:
```js
var Link = require('react-router/Link');
var ActiveState = require('react-router/ActiveState');
var Tab = React.createClass({
mixins: [ ActiveState ],
getInitialState: function () {
return { isActive: false };
},
updateActiveState: function () {
this.setState({
isActive: Tab.isActive(this.props.to, this.props.params, this.props.query)
})
},
render: function() {
var className = this.state.isActive ? 'active' : '';
var link = Link(this.props);
return <li className={className}>{link}</li>;
}
});
// use it just like <Link/>, and you'll get an anchor wrapped in an `li`
// with an automatic `active` class on both.
<Tab to="foo">Foo</Tab>
```
|
