简化反应导航组件

如何简化反应导航组件？我装了一些像下面这样的东西，但它看起来很静，我相信它会更好。简化反应导航组件

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

简化反应导航组件

回答

相关问题