React / Redux子組件不可見

Question

我是新手，也有反應/ redux，子組件有問題。 為了為網站創建動態導航，我設置了一個NavigationContainer來顯示NavigationComponent並將每個項目映射到NavigationItem組件。 不幸的是，我的實際解決方案無法正常工作。 誰能告訴我什么缺失或錯誤？

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

Answer 1

我真傻 在Ty Le的建議下，我重建了所有內容，發現我忘記了從NavigationItem.js中的react-router導入Link。 這引發了我之前沒有注意到的錯誤。 沒有一切正常。