2016-10-22 24 views
0

私は新しいtoo react/reduxです。子コンポーネントに問題があります。ウェブサイトの動的ナビゲーションを作成するには、NavigationConponentを設定してNavigationComponentを表示し、各アイテムをNavigationItemコンポーネントにマッピングします。残念ながら私の実際の解決策は機能していません。誰が何が欠落しているか間違っているか教えていただけますか?React/Redux子コンポーネントが表示されません。

NavigationContainer.js:

import React, { PropTypes } from 'react' 
import { connect } from 'react-redux' 
import Navigation from '../components/Navigation' 
import NavigationItem from '../components/NavigationItem' 
import { getCategories, isCollapsed } from '../reducers/navigation' 

const NavigationContainer = ({ title, categories, collapsed }) => (
    <Navigation 
    title={title} 
    collapsed={collapsed}> 
     {categories.map(category => 
     <NavigationItem 
      key={category.id} 
      nav={category} /> 
    )} 
    </Navigation> 
) 

NavigationContainer.propTypes = { 
    categories: PropTypes.arrayOf(PropTypes.shape({ 
    id: PropTypes.number.isRequired, 
    title: PropTypes.string.isRequired, 
    link: PropTypes.string.isRequired 
    })).isRequired, 
    collapsed: PropTypes.bool.isRequired, 
    title: PropTypes.string.isRequired 
} 

const mapStateToProps = (state) => ({ 
    categories: state.navigation.categories, 
    collapsed: state.navigation.collapsed, 
    title: state.navigation.title 
}) 

export default connect(
    mapStateToProps, 
    { } 
)(NavigationContainer) 

Navigation.js:

import React, { PropTypes } from 'react' 
import { IndexLink, Link } from 'react-router' 
import { NavigationItem } from './NavigationItem' 

const Navigation = ({ title, collapsed, children }) => { 
    const visible = collapsed ? 'active' : '' 

    return (
    <div id="wrapper" className={visible}> 
     <div id="sidebar-wrapper"> 
     <nav id="spy"> 
      <ul className="sidebar-nav nav"> 
      <li className="sidebar-brand"> 
       <Link to="/"><span className="fa fa-home solo">{title}</span></Link> 
      </li> 
      {children} 
      </ul> 
     </nav> 
     </div> 
    </div> 
) 
} 

Navigation.propTypes = { 
    children: PropTypes.node, 
    title: PropTypes.string, 
    collapsed: PropTypes.bool 
} 

export default Navigation 

NavigationItem.js:

import React, { PropTypes } from 'react' 

const NavigationItem = ({ nav }) => (
    <li className="sidebar-brand"> 
    <Link to="/"><span className="fa fa-home solo">{nav.title}</span></Link> 
    </li> 
) 

NavigationItem.propTypes = { 
    nav: PropTypes.shape({ 
    id: PropTypes.number.isRequired, 
    title: PropTypes.string.isRequired 
    }).isRequired 
    //onNavClicked: PropTypes.func.isRequired 
} 

export default NavigationItem 
+0

正確に動作していないことを教えていただけますか?例:あなたは特定のルートに行きますが、コンソールはエラーxxxxをスローします。また、ルートコードを追加する必要がありますか? – iamnat

+0

NavigationContainerのマップされたカテゴリ(NavigationItem)は表示されず、コンソールにもエラーはありません。ここにdevツールのスクリーンショットがありますhttp://imageshack.com/a/img921/1332/eAqBdy.png – Xaptor

+0

私があなたのコードについて知る奇妙なことは、ナビゲーション内の 'import {NavigationItem} from '/ NavigationItem''行です.jsは、1)NavigationItemはこのコンポーネントでは使用されておらず、2)NavigationContainer.jsでのインポートと矛盾する中括弧を使用してインポートしています。 –

答えて

0

私は愚かです。 Ty Leの勧告の後、私はすべてを再構築し、NavigationItem.jsの反応ルータからリンクをインポートするのを忘れていることが分かりました。それは私が以前気付いていなかったエラーを投げます。すべてが機能しません。

関連する問題