React/Redux 하위 구성 요소가 보이지 않습니다.

저는 새로운 반응을 보였습니다 ./ redux와 나는 하위 구성 요소에 문제가 있습니다. 웹 사이트의 동적 탐색을 만들려면 NavigationComponent를 표시하는 NavigationContainer를 설정하고 각 항목을 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

출처

2016-10-22 Xaptor

정확하게 작동하지 않는 것을 우리에게 말해 줄 수 있습니까? 예 : 특정 경로로 가고 있지만 콘솔에서 xxxx 오류가 발생합니다. 또한 경로 코드를 추가해야할까요? – iamnat

NavigationContainer의 매핑 된 범주 (NavigationItem)가 표시되지 않고 콘솔에 오류가 없습니다. 다음은 개발자 도구 스크린 샷입니다. http://imageshack.com/a/img921/1332/eAqBdy.png – Xaptor

코드에서 볼 수있는 유일한 이상한 점은 NavigationItem에서 'import {NavigationItem} from'./NavigationItem '줄입니다. .js와 같이 1) NavigationItem이이 구성 요소에서 사용되지 않고 2) NavigationContainer.js에서 가져온 것과 일치하지 않는 중괄호를 사용하여 가져 오기됩니다. –

나는 바보입니다. Ty Le의 추천 후 모든 것을 다시 작성하고 NavigationItem.js의 반응 라우터에서 Link를 가져 오는 것을 잊어 버린 것을 발견했습니다. 그건 내가 전에 눈치 채지 못한 오류를 던져 버린다. 어떤 것도 작동하지 않습니다.

출처

2016-10-22 13:41:50 Xaptor

React/Redux 하위 구성 요소가 보이지 않습니다.

답변

관련 문제