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