Question

如何简化反应导航组件？我捏造了类似下面的东西，但看起来是静态的，我确信它会更好。

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>

因此，组件可以决定是否应该呈现链接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>
);

简化React Navigation组件

1 个答案: