Cleaner JSX для React-Router Ссылки

Question

Мне интересно, есть ли у кого-нибудь лучший способ иметь несколько ссылок, которые используют компонент Link React-Router. Вот что мой код выглядит следующим образом:

<ul className="site-nav__list"> 
    <li className="site-nav__list-item"> 
     <Link 
      className="site-nav__link" 
      activeClassName="is-active" 
      to={'/example'} 
     >Example</Link> 
    </li> 
    <li className="site-nav__list-item"> 
     <Link 
      className="site-nav__link" 
      activeClassName="is-active" 
      to={'/example'} 
     >Example</Link> 
    </li> 
    <li className="site-nav__list-item"> 
     <Link 
      className="site-nav__link" 
      activeClassName="is-active" 
      to={'/example'} 
     >Example</Link> 
    </li> 
    <li className="site-nav__list-item"> 
     <Link 
      className="site-nav__link" 
      activeClassName="is-active" 
      to={'/example'} 
     >Example</Link> 
    </li> 
</ul> 

Может вы, ребята, думает о лучшем способе сделать это, как цикл над массивом объектов, который имеет имя и адрес? Кажется хорошей идеей, но я не уверен, как бы я ее написал.

Answer 1

Stateless function components удобны для очистки ваших render() методы, когда у вас есть повторяющиеся биты статического контента:

let SiteNavLink = ({children, to}) => <li className="site-nav__list-item"> 
    <Link className="site-nav__link" activeClassName="is-active" to={to}> 
    {children} 
    </Link> 
</li> 

Использование:

<ul className="site-nav__list"> 
    <SiteNavLink to="/example1">Example 1</SiteNavLink> 
    <SiteNavLink to="/example2">Example 2</SiteNavLink> 
    <SiteNavLink to="/example3">Example 3</SiteNavLink> 
    <SiteNavLink to="/example4">Example 4</SiteNavLink> 
</ul> 

Answer 2

Вы могли бы сделать что-то вроде ...

Внедрение нового компонента:

function MyLink({ url, title }) { 
    return (
    <li className="site-nav__list-item"> 
     <Link 
     className="site-nav__link" 
     activeClassName="is-active" 
     to={url}> 
     {title} 
     </Link> 
    </li> 
) 
} 

Затем создать коллекцию для создания (или источника из динамического источника данных):

const urls = [ 
    { url: '/foo' title: 'Foo' }, 
    { url: '/bar' title: 'Bar' }, 
    { url: '/baz' title: 'Baz' }, 
]; 

Тогда рендеринга:

<ul className="site-nav__list"> 
    { 
    urls.map(({ url, title }) => 
     <MyLink key={url} url={url} title={title} /> 
    ) 
    } 
</ul>