ReactJS: методы жизненного цикла в классе или хуки в функциональном компоненте с помощью реквизита - PullRequest
Новая
       22

ReactJS: методы жизненного цикла в классе или хуки в функциональном компоненте с помощью реквизита

0 голосов
/ 12 октября 2019

Мне трудно решить проблему с моим кодом, когда мне нужно использовать методы или хуки жизненного цикла в функциональном компоненте.

В настоящее время я обработал методы жизненного цикла, и код выглядит следующим образом:

class Users extends Component {

    constructor(props) {
        super(props)
    }

    handleScroll(event) {
        let headers = document.getElementsByClassName("rt-thead");
        for (let i = 0; i < headers.length; i++) {
            headers[i].scrollLeft = event.target.scrollLeft;
        }
    }
    componentDidMount() {
        this._tBodyComponent = document.getElementsByClassName("rt-tbody")[0];
        this._tBodyComponent.addEventListener("scroll", this.handleScroll);
    }
    componentWillUnmount() {
        this._tBodyComponent.removeEventListener("scroll", this.handleScroll);
    }

    render(){
        return(
         <div><UsersTable {...this.props}/></div>
        );
     }
}

, который работает почти нормально, пока я не хочу получить доступ к пропущенным реквизитам в компоненте UsersTable.

В этот момент я решил переписать этот класс в функциональный компонент, который выглядит примерно так:: 

const Users = props => {

        ....

        return(
         <div><UsersTable {...props}/></div>
        );

}

, а затем внутри компонента таблицы UsersTable добавьте хуки как 

const handleScroll = (event) => {
    let headers = document.getElementsByClassName("rt-thead");
    for (let i = 0; i < headers.length; i++) {
        headers[i].scrollLeft = event.target.scrollLeft;
    }
}

const UsersTable = props => {

    ...

    //componendDidMount
    useEffect(() => {
        this._tBodyComponent = document.getElementsByClassName("rt-tbody")[0];
        this._tBodyComponent.addEventListener("scroll", this.handleScroll.bind(null, event));
    }, []);

    //ComponentWillMount
    useEffect(() => {
        this._tBodyComponent.addEventListener("scroll", this.handleScroll.bind(event));
        return () => {
            this._tBodyComponent.removeEventListener("scroll", this.handleScroll.bind(event));
        }
    }, [])

    ....

}

, но это приводит к сбою при компиляции для Unexpected use of 'event' или неопределенному _tBodyComponent

У меня вопрос: стоит ли переписывать класс в функциональный компонент, чтобы передать пропущенные реквизиты дочернему компоненту, или я что-то там не так делаю, или, если да, то как правильно обработать событие прокрутки в компоненте как ловушки?

...