1

我对这一切都很陌生（大约三天），所以请原谅我的无知。

我正在使用 React、React-Router 和 React-Bootstrap 的组合。像这个人一样，我想结合 React-Router<Link />和 React-Bootstrap 的<NavItem />功能，以便将.active类应用于<li>元素而不是（或以及）<a>元素。

真正令人沮丧的是我有这个工作，然后当我做出一些不相关的更改时它停止了，在我看来，一些不相关的更改（我相信我已经撤消了，从那以后）。

这是我的代码：

listlink.js

import React from 'react';
import Router from 'react-router';
import classNames from 'classnames';

let Link = Router.Link;

let ListLink = React.createClass({
    contextTypes: {
        router: React.PropTypes.func
    },

    /* copied from React-Bootstrap's NavItem.js */
    propTypes: {
        onSelect: React.PropTypes.func,
        active: React.PropTypes.bool,
        disabled: React.PropTypes.bool,
        href: React.PropTypes.string,
        title: React.PropTypes.node,
        eventKey: React.PropTypes.any,
        target: React.PropTypes.string
    },

    render: function () {
        /* error happens here */
        let isActive = this.context.router.isActive(this.props.to);

        /* copied from React-Bootstrap's NavItem.js */
        let {
            disabled,
            active,
            href,
            title,
            target,
            children,
            ...props } = this.props;

        let classes = {
            'active': isActive,
            'disabled': disabled
        };

        return (
            <li { ...props } className={ classNames(props.classNames, classes) }>
                <Link to={ this.props.to }>{ this.props.children }</Link>
            </li>
        );
    }
});

module.exports = ListLink;

应用程序.js

import React from 'react';
import Router from 'react-router';
import classNames from 'classnames';
import ListLink from '../components/listlink';
import BS from 'react-bootstrap';

/* ... */

let DefaultRoute = Router.DefaultRoute;
let Route = Router.Route;
let RouteHandler = Router.RouteHandler;

let Nav = BS.Nav;
let Navbar = BS.Navbar;

let App = React.createClass({
    render: function () {
        return (
            <div>
                <Navbar brand={this.props.toonName} fixedTop>
                    <Nav bsStyle='tabs'>
                        <ListLink to="toon">Character</ListLink>
                        <ListLink to="spell-book">Spell Book</ListLink>
                        <ListLink to="on-your-turn">On Your Turn</ListLink>
                        <ListLink to="battle" disabled={true}>Battle</ListLink>
                    </Nav>
                </Navbar>
                <RouteHandler />
            </div>
        );
    }
});

let routes = (
    <Route name="app" path="/" handler={App} toonName="Ivellios">
        <Route name="toon" handler={Toon} />
        <Route name="spell-book" handler={SpellBook} />
        <Route name="on-your-turn" handler={OnYourTurn} />
        <Route name="battle" handler={Battle} />
        <DefaultRoute handler={Toon} />
    </Route>
);

Router.run(routes, function (Handler) {
    React.render(<Handler toonName="Ivellios" />, document.body);
});

module.exports = App;

let isActive =...当我在in设置断点时，它listlink.js会中断 5 次，每次中断一次<ListLink>，然后再次中断第五次。这是第五次 where is ，并且引用会引发错误。this.props.totoonthis.context.routerundefined.isActive

我想也许是因为<DefaultRoute />声明，但情况似乎并非如此（注释掉这条线并没有什么不同）。无论/#/[page]URL 中是哪个，它总是toon在第五次迭代中，并且总是失败并出现相同的错误。

Uncaught TypeError: Cannot read property 'isActive' of undefined

我不知道如何进一步调试。想法？

4

0 回答 0