Nhận vị trí offsetTop của div trong React

Question

Tôi đang cố gắng triển khai chế độ xem Danh sách trong React. Điều tôi đang cố gắng đạt được là lưu trữ thông tin tiêu đề danh sách và đăng ký các thành phần và đăng ký sự kiện cuộn. mỗi khi người dùng cuộn cửa sổ, tôi muốn lấy div đã lưu và tính lại dữ liệu offsetTop.

Vấn đề bây giờ là, tôi thấy bảng điều khiển chỉ in ra giá trị ban đầu (giá trị được cố định và không bao giờ thay đổi) offsetTop dữ liệu không bao giờ thay đổi trong hàm onscroll.

Bất kỳ ai đề xuất cách nhận mới nhất offsetTop từ đối tượng _instances?

import React, { Component } from 'react'; 
import ListHeader from './lib/ListHeader'; 
import ListItems from './lib/ListItems'; 

const styles = { 
    'height': '400px', 
    'overflowY': 'auto', 
    'outline': '1px dashed red', 
    'width': '40%' 
}; 

class HeaderPosInfo { 
    constructor(headerObj, originalPosition, originalHeight) { 
    this.headerObj = headerObj; 
    this.originalPosition = originalPosition; 
    this.originalHeight = originalHeight; 
    } 
} 

export default class ReactListView extends Component { 
    static defaultProps = { 
    events: ['scroll', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll', 'resize', 'touchmove', 'touchend'], 
    _instances:[], 
    _positionMap: new Set(), 
    _topPos:'', 
    _topWrapper:'' 
    } 

    static propTypes = { 
    data: React.PropTypes.array.isRequired, 
    headerAttName: React.PropTypes.string.isRequired, 
    itemsAttName: React.PropTypes.string.isRequired, 
    events: React.PropTypes.array, 
    _instances: React.PropTypes.array, 
    _positionMap: React.PropTypes.object, 
    _topPos: React.PropTypes.string, 
    _topWrapper: React.PropTypes.object 
    }; 

    state = { 
    events: this.props.events, 
    _instances: this.props._instances, 
    _positionMap: this.props._positionMap, 
    _topPos: this.props._topPos 
    } 

    componentDidMount() { 
    this.initStickyHeaders(); 
    } 

    componentWillUnmount() { 

    } 

    componentDidUpdate() { 

    } 

    refsToArray(ctx, prefix){ 
    let results = []; 
    for (let i=0;;i++){ 
     let ref = ctx.refs[prefix + '-' + String(i)]; 
     if (ref) results.push(ref); 
     else return results; 
    } 
    } 

    initHeaderPositions() { 
    // Retrieve all instance of headers and store position info 
    this.props._instances.forEach((k)=>{ 
     this.props._positionMap.add(new HeaderPosInfo(
      k, 
      k.refs.header.getDOMNode().offsetTop, 
      k.refs.header.getDOMNode().offsetHeight 
     )); 
    }); 
    let it = this.props._positionMap.values(); 
    let first = it.next(); 
    this.props._topPos = first.value.originalPosition; 
    this.props._topWrapper = first.value.headerObj; 
    } 

    initStickyHeaders() { 
    this.props._instances = this.refsToArray(this, 'ListHeader'); 
    this.initHeaderPositions(); 

    // Register events listeners with the listview div 
    this.props.events.forEach(type => { 
     if (window.addEventListener) { 
     React.findDOMNode(this.refs.listview).addEventListener(type, this.onScroll.bind(this), false); 
     } else { 
     React.findDOMNode(this.refs.listview).attachEvent('on' + type, this.onScroll.bind(this), false); 
     } 
    }); 
    } 

    onScroll() { 

    // update current header positions and apply fixed positions to the top one 
    console.log(1); 
    let offsetTop = React.findDOMNode(this.props._instances[0].refs.header).offsetTop; 

    } 

    render() { 
    const { data, headerAttName, itemsAttName } = this.props; 
    let _refi = 0; 
    let makeRef =() => { 
     return 'ListHeader-' + (_refi++); 
    }; 

    return (
     <div ref="listview" style={styles}> 
     { 
     Object.keys(data).map(k => { 
     const header = data[k][headerAttName]; 
     const items = data[k][itemsAttName]; 
      return (
      <ul key={k}>  
       <ListHeader ref={makeRef()} header={header} /> 
       <ListItems items={items} /> 
      </ul> 
     ); 
     }) 
     } 
     </div> 
    ); 
    } 
} 

Mã nguồn toàn là trên Github, bạn có thể sao chép và biên dịch nó từ đây:

Github

Answer 1

Bạn có thể được khuyến khích sử dụng các phương pháp Element.getBoundingClientRect() để đầu bù đắp các yếu tố của bạn . Phương thức này cung cấp các giá trị bù đắp đầy đủ (trái, trên, phải, dưới, chiều rộng, chiều cao) của phần tử trong khung nhìn.

Kiểm tra John Resig's post mô tả mức độ hữu ích của phương pháp này.

Answer 2

câu trả lời của Eugene sử dụng hàm đúng để có được các dữ liệu, nhưng đối với hậu thế, tôi muốn giải thích rõ ràng chính xác làm thế nào để sử dụng nó trong Phản ứng v0.14 + (theo this answer):

import ReactDOM from 'react-dom'; 
    //... 
    componentDidMount() { 
    var rect = ReactDOM.findDOMNode(this) 
     .getBoundingClientRect() 
    } 

Is làm việc cho tôi một cách hoàn hảo và tôi đang sử dụng dữ liệu để cuộn lên đầu thành phần mới vừa được gắn kết.

Answer 3

Một giải pháp tốt hơn với ref để tránh findDOMNode không được khuyến khích.

... 
onScroll() { 
    let offsetTop = this.instance.getBoundingClientRect().top; 
} 
... 
render() { 
... 
<Component ref={(el) => this.instance = el } /> 
...