反应/ Redux的子组件不可见

我也是新的反应/ redux和我有一个儿童组件的问题。要为网站创建动态导航，我已经设置了NavigationContainer，显示NavigationComponent并将每个项目映射到NavigationItem组件。不幸的是我的实际解决方案不起作用有人可以告诉我什么是缺失或错误？反应/ 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

来源

2016-10-22 Xaptor

你能告诉我们什么是不准确的工作？例如：你要去特定的路线，但控制台抛出一个错误xxxx。另外，也许你还应该添加路线代码？ – iamnat

来自NavigationContainer的映射类别（NavigationItem）在控制台中不可见并且没有错误。这里是一个开发工具截图http://imageshack.com/a/img921/1332/eAqBdy.png – Xaptor

我看到的关于你的代码的唯一奇怪的事情是导航中的导航{NavigationItem} ./ NavigationItem''行.js，因为1）'NavigationItem'没有在这个组件中使用，2）你使用大括号导入它，这与您在NavigationContainer.js中的导入不一致。 –

我这么愚蠢。 Ty Le的建议后，我重建了一切，发现我忘了导入NavigationItem.js中的react-router链接。这引发了一个我以前没有注意到的错误。没有一切正常。

来源

2016-10-22 13:41:50 Xaptor

反应/ Redux的子组件不可见

回答

相关问题