我们可以通过在组件中访问 this.state ，来判断下拉是否被打开了，并且，我们可以为其添加一个新的 css 样式 class 来展现鼠标 hover 的效果。
var navigationConfig = [ { href: 'http://ryanclark.me', text: 'My Website', children: [ { href: 'http://ryanclark.me/how-angularjs-implements-dirty-checking/', text: 'Angular Dirty Checking' }, { href: 'http://ryanclark.me/getting-started-with-react/', text: 'React' } ] } ]; var Navigation = React.createClass({ getInitialState: function () { return { openDropdown: -1 }; }, getDefaultProps: function () { return { config: [] } }, openDropdown: function (id) { this.setState({ openDropdown: id }); }, closeDropdown: function () { this.setState({ openDropdown: -1 }); }, propTypes: { config: React.PropTypes.array }, render: function () { var config = this.props.config; var items = config.map(function (item, index) { var children, dropdown; if (item.children) { children = item.children.map(function (child) { return ( <li className="navigation__dropdown__item"> <a className="navigation__dropdown__link" href=https://www.jb51.net/article/{ child.href }> { child.text } </a> </li> ); }); var dropdownClass = 'navigation__dropdown'; if (this.state.openDropdown === index) { dropdownClass += ' navigation__dropdown--open'; } console.log(this.state.openDropdown, index); dropdown = ( <ul className=https://www.jb51.net/article/{ dropdownClass }> { children } </ul> ); } return ( <li className="navigation__item" onMouseOut=https://www.jb51.net/article/{ this.closeDropdown } onMouseOver=https://www.jb51.net/article/{ this.openDropdown.bind(this, index) }> <a className="navigation__link" href=https://www.jb51.net/article/{ item.href }> { item.text } </a> { dropdown } </li> ); }, this); return ( <div className="navigation"> { items } </div> ); } }); React.render(<Navigation config=https://www.jb51.net/article/{ navigationConfig } />, document.body);
在这里看实例 - 鼠标划过“My Website”，下拉即会展现。
在前面，我已经给每个列表项添加了鼠标事件。如你所见，我用的是 .bind (绑定) 调用，而非其它的方式调用 - 这是因为，当用户的鼠标划出元素区域，我们并不用关注光标在哪里，所有我们需要知晓的是，将下拉关闭掉，所以我们可以将它的值设置成为-1。但是，我们需要知晓的是当用户鼠标划入的时候哪个元素被下拉展开了，所以我们需要知道该参数(元素的索引)。 我们使用绑定的方式去调用而非简单的透过函数（function）去调用是因为我们需要通过 React 去调用。如果我们直接调用，那我们就需要一直调用，而不是在事件中调用他。
现在我们可以添加很多的条目到 navigationConfig 当中，而且我们也可以给他添加样式到下来功能当中。查看实例.
您可能感兴趣的文章: