リアクションナビゲーションコンポーネントの簡略化

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