javascript - Fluxible 和 Navlink 路由错误

Question

我实际上正在使用 Fluxible 开发一个应用程序，但我在使用路由参数时遇到了问题。

实际上，我有这个渲染函数:

render() {
        return (
          <div className="card small hoverable">
              <div className="card-image">
                <img src="http://www.gizmobolt.com/wp-content/uploads/2014/11/14-77.jpg"/>
                <span className="card-title">{this.props.title}</span>
              </div>
              <div className="card-content">
                <p>I am a very simple card. I am good at containing small bits of information.
                I am convenient because I require little markup to use effectively.</p>
              </div>
              <div className="card-action">
                <NavLink routeName="ProjectDetail" navParams={{id: this.props.key}}>Manage</NavLink>
              </div>
          </div>
        );
    }

我的 ./conf/routes.js 中的这条路线:

项目详细信息:{ 路径: '/project/:id/details', 方法:'获取'， 页面:“项目详细信息”， title: '项目细节', 处理程序: require('../components/ProjectDetail'), 不在菜单中:true }

这是我得到的错误:

/soft/blog/node_modules/fluxible-router/lib/createNavLinkComponent.js:94
                throw new Error('NavLink created without href or unresolvable 
                      ^
Error: NavLink created without href or unresolvable routeName 'ProjectDetail'

只有当我尝试在routes.js中使用参数化路由时才会发生这种情况。

我不知道如何做不同的事情:-/

Answer 1

根据https://github.com/facebook/react/issues/2429您无法从组件引用 this.key 或 this.props.key。

推荐in this comment是为了

I would suggest renaming or duplicating the prop [sic key] name as a possible fix if you really need to access it.

所以将你的代码更改为类似的内容

render() {
    return (
      <div className="card small hoverable">
          <div className="card-image">
            <img src="http://www.gizmobolt.com/wp-content/uploads/2014/11/14-77.jpg"/>
            <span className="card-title">{this.props.title}</span>
          </div>
          <div className="card-content">
            <p>I am a very simple card. I am good at containing small bits of information.
            I am convenient because I require little markup to use effectively.</p>
          </div>
          <div className="card-action">
            <NavLink routeName="ProjectDetail" navParams={{id: this.props.id}}>Manage</NavLink>
          </div>
      </div>
    );
}

并在父渲染组件中执行以下操作:

render() {
  {this.states.cards.map(function eachCard(card) {
      return <CardItem key={card.id} id={card.id} />;
   });
}