Question

我有一个父元素，我想对其子组件使用其scrollTop。

import { Modal } from 'react-bootstrap';

export class ParentComponent extends React.Component {
    render() {
        return (
            <Modal>
                <Modal.Header>
                </Modal.Header>

                <Modal.Body ref={(ref) => this.modalBody = ref}>
                    <ChildComponent modalBodyPosition={this.modalBody.scrollTop} />
                </Modal.Body>

                <Modal.Footer>
                </Modal.Footer>
            </Modal>
        )
    }
}

export class ChildComponent extends React.Component {
    render() {
        console.log(this.props.modalBodyPosition);

        return (
            <div></div>
        );
    }
}

四处搜寻后，我还没有发现一种对我有效的方法。我尝试传递一个回调函数，但这样做时出现React Instance错误。

上面的代码给了我null / undefined错误。有什么方法可以访问子组件中HTML元素上的scrollTop属性？

注意：我正在使用React 15，因此无法访问React.createRef函数。

Answer 1

写得很快，但是应该是这样的：

import { Modal } from 'react-bootstrap';

export class ParentComponent extends React.Component {
    _handleScroll = () =>
      this.setState({modalBodyPosition: this.modalBody.scrollTop})
    
    render() {
        return (
            <Modal>
                <Modal.Header>
                </Modal.Header>

                <Modal.Body onScroll={this._handleScroll.bind(this)} ref={(ref) => this.modalBody = ref}>
                    <ChildComponent modalBodyPosition={this.state.modalBodyPosition} />
                </Modal.Body>

                <Modal.Footer>
                </Modal.Footer>
            </Modal>
        )
    }
}

export class ChildComponent extends React.Component {
    render() {
        console.log(this.props.modalBodyPosition);

        return (
            <div></div>
        );
    }
}

React-将javascript元素属性传递给子组件

1 个答案: