Waypointを使用してアクティブな要素を取得するにはどうすればよいですか？

Question

React（16）でWaypoint（7.3.2）を使用して、スクロール可能な項目のリストを作成しています。各項目はdivの上部に到達すると非表示になります。私の基本的な質問は、イベントまたはコールバックにウェイポイントを出入りする要素への参照を取得する方法です。

私はコールバックに入れたい要素にref={}を含めることで、要素への参照を取得し、不透明度を変更できると思っていました。 Waypointが接続されているコードは次のとおりです。

class Division extends Component { 
    constructor(props) { 
     super(props); 
    } 

    _handleWayPointEnter = (event) => { 
     console.log("Waypoint enter " + JSON.stringify(event, 4)); 
    } 
    _handleWayPointLeave = (event) => { 
     console.log("Waypoint leave " + JSON.stringify(event, 4)); 
    } 

    render() { 
     let inlineStyle= {opacity : this.state.opacity}; 
     return (
      <Waypoint debug={false} onEnter={this._handleWayPointEnter} onLeave={this._handleWayPointLeave} > 
       <div style={inlineStyle} ref={this.props.innerRef} className="sch-division"> 
        {this.props.name}<br/> 
        <SomeOtherComponent /> 
       </div> 
      </Waypoint> 
     ); 
    } 

} 

export default Division; 

すべての回答が高く評価されています。

- 反応 - ウェイポイントをドキュメントから

Answer 1

グリフ：

あなたが子供を渡す行う場合、それは単一のDOM要素（例えば<div>）することができ または複合部品（例えば<MyComponent />） 。

ウェイポイントは境界を計算するためにDOMノードが必要です。 DOMコンポーネントをWaypointに渡すと、refノードへの参照が自動的に取得されます。コンポジット コンポジットを渡す場合は、 ウェイポイントによって渡されたinnerRefプロップをコンポーネントに使用する必要があります。単にDOM コンポーネントのリファレンスとして渡してください。すべて設定されています。この例のように：

class Block extends React.Component { 
    render() { 
    return <div ref={this.props.innerRef}>Hello</div> 
    } 
} 
Block.propTypes = { 
    innerRef: PropTypes.func.isRequired, 
} 

const App =() => (
    <Waypoint> 
    <Block /> 
    </Waypoint> 
) 

ここでは、単一のDOM要素（<div>）を使用している、私はあなたがこのようなあなたのdiv REFを保存勧め：

<div style={inlineStyle} ref={(div) => { this.divinwaypoint = div; }} className="sch-division"> 

次に、あなたの機能でそれを使用します：

_handleWayPointEnter = (event) => { 
    console.log("Waypoint enter " + JSON.stringify(event, 4)); 
    this.divinwaypoint.style.opacity = 0; 
} 

編集：私は、ウェイポイントを使用していないが、私はそれがevent Pにコンポーネント参照を表示すべきだと思いますロープ。