React Navigation 구성 요소 간소화

내 반응 탐색 구성 요소를 어떻게 단순화 할 수 있습니까? 나는 아래처럼 뭔가를 creaded지만, 정적으로 보입니다 그리고 나는 그것이 더 좋을 것이라고 확신합니다.React Navigation 구성 요소 간소화

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

이 작업을 좀 더 동적으로하고 싶습니다. 이 작업을 수행하는 더 좋은 방법은 무엇입니까? 몇 가지 예를 보았지만 모두 내 구성 요소와 같은 정적 링크였습니다.

많은 도움에 감사드립니다. 링크가 active 여부를 렌더링 할 필요가있는 경우

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

는 따라서 구성 요소가 결정할 수 :

출처

2017-02-22 Robson

하나의 간단한 다음 단계는이 데이터를 기반으로 탐색을 배열에 객체로의 링크를 저장하고 생성 할 수에서

최적화는 링크가 활성화되어있는 경우 Check를 MenuItem-Component (또는 구성 요소의 래퍼)로 이동하는 것입니다. 따라서 MenuItem은 원하는 경로를 얻을 수 있으므로 a) 링크가 활성 상태인지 확인하고 b) 올바른 링크를 빌드 할 수 있습니다. – arie

하나 개의 아이디어는 MenuItem 구성 요소를 포장하는 것입니다.

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

React Navigation 구성 요소 간소화

답변

관련 문제