Question

我对这一切都很新（大约三天），原谅我的无知。

我正在使用React，React-Router和React-Bootstrap的组合。与this guy类似，我想结合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;

app.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 =...的{{1}}设置断点时，会断开5次，每次listlink.js断开一次，然后第五次<ListLink>为{{1}再次。这是第五次this.props.to为toon，引用this.context.router会引发错误。

我想也许是因为undefined声明，但似乎并非如此（评论该行没有任何区别）。无论URL中有哪个.isActive，它在第五次迭代时始终为<DefaultRoute />，并且始终以相同的错误失败。

/#/[page]

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

有时但不是全部设置React类上下文

listlink.js

app.js

0 个答案: