0

我实际上正在使用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 中的这条路线：

ProjectDetail: { path: '/project/:id/details', method: 'get', page: 'ProjectDetail', title: 'Project detail', handler: require('../components/ProjectDetail'), notInMenu:真的 }

这是我得到的错误：

/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 中使用参数化路由时才会发生这种情况。

我不知道要让它与众不同：-/

4

2 回答 2

1

根据https://github.com/facebook/react/issues/2429您不能引用this.key或this.props.key来自组件。

此评论中的建议是

如果您确实需要访问它，我建议重命名或复制 prop [sic key] 名称作为可能的解决方法。

所以将您的代码更改为类似

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} />;
   });
}
于 2015-09-16T07:20:33.243 回答
0

看起来你的大小写错误：ProjectDetailvs projectDetail。确保你是一致的。

于 2015-09-15T17:23:46.893 回答