簡化反應導航組件

如何簡化反應導航組件？我裝了一些像下面這樣的東西，但它看起來很靜，我相信它會更好。簡化反應導航組件

class Nav extends React.Component { 
    logout(e) { 
     e.preventDefault(); 
     this.props.addFlashMessage({ 
      type: 'success', 
      text: 'You have been logged out successfully.' 
      }); 
     this.props.logout(); 
     } 

    render() { 
    const { isAuthenticated } = this.props.auth; 

    const {location} = this.props; 
    const homeClass = location.pathname === "/" ? true : false; 
    const about = location.pathname.match(/^\/about/) ? true : false; 
    const services = location.pathname.match(/^\/services/) ? true : false; 
    const loginClass = location.pathname.match(/^\/login/) ? true : false; 
    const signupClass = location.pathname.match(/^\/signup/) ? true : false; 

    const userLinks = (
     <Menu className="main-menu"> 
     <MenuItem isActive={homeClass}><Link to="/">Home</Link></MenuItem> 
     <MenuItem isActive={AboutClass}><Link to="/about">About</Link></MenuItem> 
     <MenuItem isActive={servicesClass}><Link to="/services">Services</Link></MenuItem> 
     <MenuItem><Link to="#" onClick={this.logout.bind(this)}>Logout</Link></MenuItem> 
     </Menu> 
    ); 

    const guestLinks = (
     <Menu className="main-menu"> 
     <MenuItem isActive={homeClass}><Link to="/">Home</Link></MenuItem> 
     <MenuItem isActive={AboutClass}><Link to="/about">About</Link></MenuItem> 
     <MenuItem isActive={servicesClass}><Link to="/services">Services</Link></MenuItem> 
     <MenuItem isActive={loginClass}><Link to="/login">Log in</Link></MenuItem> 
     <MenuItem isActive={signupClass}><Link to="/signup">Register</Link></MenuItem> 
     </Menu> 
    ); 

    return (
     <div className="main-nav"> 
      <Row> 
       <Link to="/" className="site-logo">My App</Link> 
       { isAuthenticated ? userLinks : guestLinks } 
      </Row> 
     </div> 
    ); 
    } 
}

我想這樣做更具動感。有什麼更好的方法來做到這一點？我看到了一些例子，但都是像我的組件一樣的靜態鏈接。

非常感謝您的幫助。

來源

2017-02-22 Robson

一個簡單如果鏈接處於活動狀態，則優化將移動到* MenuItem-Component（或組件的包裝器）中。因此，MenuItem將獲得所需的路徑，因此可以a）檢查鏈接是否處於活動狀態並b）構建正確的鏈接。 – arie

一個辦法是將包裝你MenuItem組件：

const MenuItemWrapper = (path, title) => 
<MenuItem isActive={location.pathname.startsWith('/' + path)}> 
    <Link to={path}>{title}</Link> 
</MenuItem>

因此，組件可以決定是否鏈接應該被渲染active與否。

在接下來的步驟中，您可以在此基礎上的數據的鏈接作爲對象存儲在數組中，並生成您的導航：

const menuEntries = [ 
    { title: 'home', path: '/'}, 
    { title: 'about', path: '/about'}, 
    ... 
] 

const Links = menuEntries.map(e => 
    <MenuItemWrapper title={e.title} path={e.path} /> 
)

因此你的菜單可以簡化爲：

const guestLinks = (
    <Menu className="main-menu">{Links}</Menu> 
);

來源

2017-02-22 15:45:05 arie

非常感謝！減少組件中代碼行的真正好方法。謝謝：] – Robson

簡化反應導航組件

回答

相關問題