React中组件渲染显示后如何滚动到该组件？

这个问题的核心原因很明确：componentDidMount只会在组件首次挂载时执行一次，如果初始状态下props.example_shown是false，那<ExtraComponent />根本没被渲染，对应的ref自然是null，这时候调用scrollToComponent肯定拿不到目标元素。

下面给你几个针对性的解决方案，适配你当前的类组件场景：

方案1：利用componentDidUpdate监听状态变化 #

类组件的componentDidUpdate会在每次props或state更新后触发，我们可以在这里判断example_shown的状态变化，只有当它从false变为true时，再执行滚动操作——这时候<ExtraComponent />已经完成渲染，ref也已经被正确赋值了。

示例代码：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.ExtraComponent = null;
  }

  componentDidUpdate(prevProps) {
    // 检查example_shown是否从false变为true
    if (!prevProps.example_shown && this.props.example_shown) {
      // 此时ExtraComponent已经渲染，ref存在
      scrollToComponent(this.ExtraComponent, { 
        offset: 0, 
        align: 'top', 
        duration: 500 
      });
    }
  }

  render() {
    return (
      <div>
        {/* 其他内容 */}
        {this.props.example_shown && (
          <ExtraComponent ref={(section) => { this.ExtraComponent = section }} />
        )}
      </div>
    );
  }
}

方案2：使用React官方推荐的createRef（更规范的写法） #

如果你用的是React 16.3+版本，建议用createRef代替回调式ref，写法更简洁，也更符合官方规范：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref实例
    this.ExtraComponentRef = React.createRef();
  }

  componentDidUpdate(prevProps) {
    if (!prevProps.example_shown && this.props.example_shown) {
      // 通过current属性获取DOM元素
      scrollToComponent(this.ExtraComponentRef.current, { 
        offset: 0, 
        align: 'top', 
        duration: 500 
      });
    }
  }

  render() {
    return (
      <div>
        {/* 其他内容 */}
        {this.props.example_shown && (
          <ExtraComponent ref={this.ExtraComponentRef} />
        )}
      </div>
    );
  }
}

额外注意事项 #

• 确保你使用的scrollToComponent工具接受DOM元素作为参数（大部分这类工具都支持），如果它需要的是组件实例，那你可能需要调整ref的指向（比如在<ExtraComponent />内部暴露实例方法，但一般滚动到组件都是操作DOM）。
• 如果未来你迁移到函数组件，可以用useRef配合useEffect监听example_shown的变化，逻辑类似：

  import { useRef, useEffect } from 'react';
  
  function ParentComponent({ example_shown }) {
    const extraComponentRef = useRef(null);
  
    useEffect(() => {
      if (example_shown && extraComponentRef.current) {
        scrollToComponent(extraComponentRef.current, { 
          offset: 0, 
          align: 'top', 
          duration: 500 
        });
      }
    }, [example_shown]);
  
    return (
      <div>
        {/* 其他内容 */}
        {example_shown && <ExtraComponent ref={extraComponentRef} />}
      </div>
    );
  }
  

内容的提问来源于stack exchange，提问作者iv444