Question

一旦组件完全呈现，我需要使用getBoundingClientRect()来获取特定元素的确切位置。

我需要使用哪种生命周期方法？我认为渲染完成后不会调用componentDidMount()。

为了更清晰，这是我正在努力实现的目标：我的组件呈现DIV个元素的列表。可能有多达30-40个。一旦渲染它们，我想自动滚动到特定元素。此元素可以位于渲染部分的底部，中间或任何位置。我为每个DIV元素添加ID，因此很容易告诉getBoundingClientReact()给我它的位置。获得该数据后，我将滚动到该位置。

更新：

这就是我的代码：

componentDidUpdate(prevProps, prevState) {

    // Get the ID of the element I need to scroll to
    const id = "divId-" + prevProps.myId;

    // Find the rendered element
    const element = document.getElementById(id);

    // Get coordinates
    const position = element.getBoundingClientRect();

    // Call scrollTo custom function to scroll to the element
    scrollTo(position.top);

    // Set the new location
    this.props.actions.setLocation(position.top);
}

Answer 1

componentWillUpdate(prevProps, prevState)

在新的渲染之前立即调用
componentWillUpdate（）正在收到道具或国家。以此为契机在更新发生之前执行准备。不调用此方法用于初始渲染。

或 componentDidUpdate(prevProps, prevState)

使用此作为在组件上操作DOM的机会已经更新。这也是做网络请求的好地方只要将当前道具与之前的道具进行比较（例如a 如果道具没有改变，则可能不需要网络请求。）

可能对你有用。您可以查看here上的详细信息。

一旦生成组件生命周期方法

1 个答案: