Question

我想知道是否有人有更好的方法来使用React-Router的Link组件。这是我的代码的样子：

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

React-Router Links的清洁JSX

2 个答案: