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

时间:2017-06-10 18:17:29

标签: jquery reactjs

我有一些带有链接的组件。活动链接下有动画(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>
   );
}

1 个答案:

答案 0 :(得分: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