最初のレンダリングの前にrefでコンポーネントをアクセスする

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> 

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