Question

我正在开发一个需要事件监听器的应用程序。提供给此事件侦听器的函数正在与DOM交互。组件安装时也需要运行相同的功能：

...
componentDidMount() {
    this.getWidth();
    window.addEventListener('resize', this.getWidth);
}

getWidth = () => {
    const elem = this.elem.clientWidth;
    ...
}

render() {
    return(
        <div>
            <SomeComponent
                ref={(elem) => this.elem = elem}
            />
        </div>
    );
}
...

由于此应用程序最初呈现服务器端，因此componentDidMount生命周期方法不会运行，因此getWidth函数不会运行，并且事件侦听器未添加到窗口对象中。我怎样才能做到这一点？

Answer 1

从文档（https://facebook.github.io/react/docs/react-dom-server.html）：

如果在已有此节点的节点上调用ReactDOM.render（）服务器呈现的标记，React将保留它并仅附加事件处理程序，允许您具有非常高性能的首次加载经验。

如何为服务器端React创建事件监听器？

1 个答案: