React初學者工具包和React路由器引導之間的集成

我對ReactJS的世界有點新，但我一直在用Javascript編寫一段時間。在使用設計模式和OOP之前，我在編寫純JS時喜歡ReactJS正在做的事情，我認爲這對我來說是一個巨大的升級。React初學者工具包和React路由器引導之間的集成

前一段時間我開始使用react-starter-kit from kriasoft。此外我還將react-bootstrap整合到這個項目中，讓我的生活變得更輕鬆。我遵循react-bootstrap的教程，併成功添加了Bootstrap。

現在的問題是我無法使用react-starter-kit中<Link />的內部版本，因爲它的簡單性和「功耗」，我非常喜歡它。

官方途徑從react-bootstrap是安裝react-router-bootstrap和替換<Link to="/path">與<LinkContainer to="/path">但是這意味着我必須更換反應路由和通用路由與反應的路由器，這是我想避免的。

什麼是將react-bootstrap與react-starter-kit集成並仍然能夠使用通用路由的正確方法？爲了使LinkContainer的行爲與Link組件一樣，我應該做出什麼樣的改變？

當使用鏈接組件從反應-初學者工具包一個獲得這種錯誤警告：validateDOMNesting（...）：不能出現的後裔。請參閱Header> NavItem> SafeAnchor> a> ...> Link> a。此問題的相關鏈接。（React-Bootstrap link item in a navitem）

react-bootstrap和react-router的官方建議。（https://github.com/ReactTraining/react-router/issues/83#issuecomment-214794477）

也正如我所說我有點新的reactJS，並有可能我失去了一些東西。如果有人可以澄清Link component from react-starter-kit 和Link from react-router之間的差異會很好。在此先感謝

來源

2016-11-22 Paschalidis Christos

相關鏈接在此： http://stackoverflow.com/questions/35687353/react-bootstrap-link-item-in-a-navitem https://github.com/ReactTraining/react-router/issues/83 –

我開始用自己的NavItem組件，而不是原：

import React, { PropTypes } from 'react'; 
import cx from 'classnames'; 
import Link from '../Link'; 

class NavItem extends React.Component { 
    static propTypes = { 
    className: PropTypes.string, 
    href: PropTypes.string.isRequired, 
    active: PropTypes.bool, 
    disabled: PropTypes.bool, 
    children: PropTypes.node.isRequired, 
    onClick: PropTypes.func, 
    }; 

    static defaultProps = { 
    active: false, 
    disabled: false, 
    }; 

    render() { 
    const { className, href, active, disabled, children, onClick } = this.props; 
    return (
     <li role="presentation" className={cx(className, { active, disabled })}> 
     <Link to={href} onClick={onClick}> 
      {children} 
     </Link> 
     </li> 
    ); 
    } 
} 

export default NavItem;

這是我按照現在由於this post的辦法。

來源

2016-11-24 10:18:57

React初學者工具包和React路由器引導之間的集成

回答

相關問題