Question

我很难解决我的代码中需要使用生命周期方法或功能组件中的钩子的问题。

目前，我已经将生命周期方法和代码看起来像一个简单的方式处理：

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编译时崩溃

我的问题是，是否值得将类重写为功能组件，以将传递的props传递给子组件，或者我在做错什么？或者，如何正确处理组件中作为钩子的滚动事件？

ReactJS：类中的生命周期方法或带有prop的功能组件挂钩

0 个答案: