Question

我是新的反应/减少，我有儿童组件的问题。为了为网站创建动态导航，我设置了一个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导入链接。这引发了一个我以前没有注意到的错误。没有一切正常。

React / Redux子组件不可见

1 个答案: