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.sub prop를 통해 DOM 노드에 대한 참조가 자동으로 처리됩니다. 복합 구성 요소를 전달하는 경우 구성 요소에 Waypoint가 전달한 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 심판을 저장 제안 :

<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 페이지에 구성 요소 심판을 표시해야한다고 생각 rop.