在React JSX中单击按钮时滚动到组件

import React from 'react';

class ScrollComponent extends React.Component {
  scrollToComponent() {
    // 实现滚动到组件的逻辑
  }

  render() {
    return (
      <div>
        <button onClick={this.scrollToComponent}>点击我滚动到目标组件</button>
        {/* 目标组件 */}
      </div>
    );
  }
}

export default ScrollComponent;

scrollToComponent() {
  const targetComponent = document.getElementById('targetComponent');
  targetComponent.scrollIntoView({ behavior: 'smooth' });
}

import React from 'react';
import ScrollComponent from './ScrollComponent';

class App extends React.Component {
  render() {
    return (
      <div>
        {/* 其他组件 */}
        <ScrollComponent />
        <div id="targetComponent">
          {/* 目标组件的内容 */}
        </div>
      </div>
    );
  }
}

export default App;