清洁JSX的阵营，路由器链接

Question

我想知道如果任何人有其数的使用作出反应，路由器的链路组件环节的更好的方法。下面是我的代码如下所示：

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

你们能想到这样做，像遍历数组对象具有名称和URL的更好的办法？看起来像一个好主意，但我不知道如何去写它。

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>