简化 React Navigation 组件

Question

如何简化我的 React 导航组件？我创建了类似下面的内容，但它看起来是静态的，我相信它会更好。

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>
    );
  }
}

我想做的更有活力。这样做的更好方法是什么？我看到了一些例子，但都是静态链接，就像我的组件中一样。

非常感谢您的帮助。

Answer 1

一个想法是包装您的 MenuItem 组件：

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

因此组件可以决定 link 是否应该呈现 active。

在下一步中，您可以将 link 作为对象存储在数组中，并根据此数据生成导航：

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>
);

简化 React Navigation 组件

Simplify React Navigation component

javascript

reactjs

react-router

react-redux