React类组件中点击导航栏滚动至对应组件的实现（react-router-dom v5）

针对React类组件+react-router-dom v5的场景，按以下步骤实现：

步骤1：给目标区域添加锚点ID #

在Homepage.js中，给OutStandingDoctor组件包裹一个带唯一ID的容器，用于定位目标区域：

<div>
  <HomeHeader isShowBanner={true} />
  <Specialty settings={settings} />
  <MedicalFacility settings={settings} />
  {/* 添加带唯一ID的容器 */}
  <div id="outstanding-doctor-section">
    <OutStandingDoctor settings={settings} />
  </div>
  <HandBook settings={settings} />
  <About />
  <HomeFooter />
</div>

步骤2：给HomeHeader的医生标签添加点击事件 #

在HomeHeader组件中，找到对应医生标签的child-content元素，绑定点击事件并实现滚动逻辑：

修改医生标签的JSX代码 #

<div className='child-content' onClick={() => this.scrollToDoctorSection()}>
  <div>
    <b>
      <FormattedMessage id='homeheader.doctor1' />
    </b>
  </div>
  <div className='subs-title'><FormattedMessage id='homeheader.select-doctor' /></div>
</div>

在类组件中新增滚动方法 #

在HomeHeader的类定义里添加处理滚动的类方法：

scrollToDoctorSection = () => {
  const targetElement = document.getElementById('outstanding-doctor-section');
  if (targetElement) {
    // 平滑滚动到目标区域，behavior: 'smooth'为可选配置，移除则为瞬间跳转
    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

可选优化：用React Ref替代原生DOM查询 #

如果不想依赖原生DOM查询，可通过React Ref实现：

1. 在Homepage.js中创建Ref并传递给HomeHeader：

class Homepage extends React.Component {
  doctorSectionRef = React.createRef();

  render() {
    return (
      <div>
        <HomeHeader 
          isShowBanner={true} 
          doctorSectionRef={this.doctorSectionRef} 
        />
        {/* 其他组件 */}
        <div ref={this.doctorSectionRef}>
          <OutStandingDoctor settings={settings} />
        </div>
        {/* 其他组件 */}
      </div>
    )
  }
}

2. 在HomeHeader中接收Ref并修改滚动方法：

scrollToDoctorSection = () => {
  if (this.props.doctorSectionRef.current) {
    this.props.doctorSectionRef.current.scrollIntoView({ 
      behavior: 'smooth', 
      block: 'start' 
    });
  }
}

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