Question

我有一些带有链接的组件。活动链接下有动画（position: absolute）行。因此，在将offset().left设置为下划线之前，我需要找到left的有效链接。但是怎么样？在第一次渲染之前，没有元素。

render() {
   var activeLink = 1; // For example, active link is the second link.
   var underlineStyle = {
       left: $hereINeedActiveLink.offset().left - $hereINeedContainer.offset().left;
   };

   return (
      <nav ref='container'>
         <a href='/' ref='link1'>Link 1</a>
         <a href='/' ref='link2'>Link 2</a>
         <a href='/' ref='link3'>Link 3</a>
         <div style={underlineStyle} />
      </nav>
   );
}

Answer 1

不，你应该改变你的方法......有时当某些东西看起来太复杂时，那是因为它意味着要在其他地方完成。在这种情况下，你应该让css处理样式元素。您只需通过将活动类应用于元素来控制javascript中的样式。

<a href='/' className={activeLink === 1 ? 'active':''}>Link 1</a>
<a href='/' className={activeLink === 2 ? 'active':''}>Link 2</a>
<a href='/' className={activeLink === 3 ? 'active':''}>Link 3</a>

look at this fiddle for reference

你的css可以通过一些不同的路径来实现元素底部的一条线。要么你可以做边框，要么你可以使用伪选择器来创建一个元素。

首先设置每个链接的样式

a {
    padding: 15px 10px;
}

边框示例

a.active {
    border-bottom: 2px solid red;
}

或伪示例（在此示例中，您需要确保锚标记为position: relative）

a.active:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: red;
}

fiddle with a pseudo selector example

首次渲染之前，通过ref访问React组件

1 个答案: