反應/ 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的子組件不可見

回答

相關問題