0
私は新しいtoo react/reduxです。子コンポーネントに問題があります。ウェブサイトの動的ナビゲーションを作成するには、NavigationConponentを設定してNavigationComponentを表示し、各アイテムを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
正確に動作していないことを教えていただけますか?例:あなたは特定のルートに行きますが、コンソールはエラーxxxxをスローします。また、ルートコードを追加する必要がありますか? – iamnat
NavigationContainerのマップされたカテゴリ(NavigationItem)は表示されず、コンソールにもエラーはありません。ここにdevツールのスクリーンショットがありますhttp://imageshack.com/a/img921/1332/eAqBdy.png – Xaptor
私があなたのコードについて知る奇妙なことは、ナビゲーション内の 'import {NavigationItem} from '/ NavigationItem''行です.jsは、1)NavigationItemはこのコンポーネントでは使用されておらず、2)NavigationContainer.jsでのインポートと矛盾する中括弧を使用してインポートしています。 –