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

Question

我有一些链接的组件。活动链接下方有动画(position: absolute(行。因此，在将left设置为下划线之前，我需要找出活动链接offset().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>

看看这个小提琴作为参考

您的 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;
}

摆弄伪选择器示例