Reactjs 水平自动滚动到反应组件

我有一个React应用程序，在其中我呈现一个水平列表。在任何时间点，一个拔模拾取处于活动状态，但在进行拾取的某个点，下一个拔模拾取将变为活动状态。当下一个激活时，我希望列表自动水平滚动，以便激活的拾取始终处于视图中

我肯定以前有人问过这个问题，但我真的不知道如何使React组件发生自动滚动事件

以下是我的代码：

DraftOrder.js：

class DraftOrder extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div className="d-flex flex-row auto-scroll-x">
          {this.props.draftPicks.map(aDraftPick => {
            return <ADraftPickInOrder key={v4()} draftPick={aDraftPick} team={this.props.team} />
          })}
        </div>
      </React.Fragment>
    );
  }
}

类DraftOrder扩展了React.Component{
render（）{
返回(
{this.props.draftPicks.map（aDraftPick=>{
返回
})}
);
}
}

ADraftPickInOrder.js：

class ADraftPickInOrder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: this.props.draftPick.active
    }
    this.renderUserName = this.renderUserName.bind(this);
    this.renderDraftedPlayer = this.renderDraftedPlayer.bind(this);
  }


  renderUserName() {
     ...
  }

  renderDraftedPlayer() {
    ...
  }

  render() {
    return (
      <div className="text-center px-3">
        <div className={classnames("font-weight-bold no-wrap", { "text-success" : this.props.draftPick.team.id === this.props.team.id } )}>{this.props.draftPick.team.name}</div>
        {this.renderUserName()}
        {this.renderDraftedPlayer()}
        <div><small>{formatDraftPickNumber(this.props.draftPick)}</small></div>
      </div>
    );
  }
}

类ADraftPickInOrder扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
活动：this.props.draftPick.active
}
this.renderUserName=this.renderUserName.bind（this）；
this.renderDraftedPlayer=this.renderDraftedPlayer.bind（this）；
}
renderUserName（）{
...
}
renderDraftedPlayer（）{
...
}
render（）{
返回(
{this.props.draftPick.team.name}
{this.renderUserName（）}
{this.renderDraftedPlayer（）}
{formatDraftPickNumber（this.props.draftPick）}
);
}
}

---

任何帮助都将不胜感激

使用ScrollView及其

scrollTo

方法：

import { ScrollView } from 'react-native';

...

setScrollViewRef = ref => {
  this.scrollView = ref;
};

handlePress = ({nativeEvent}) => {
  const { pageX, pageY } = nativeEvent;
  // find out x and y somehow
  this.scrollView.scrollTo({x, y, animated: true})
}


render() {
  <ScrollView
    horizontal 
    ref={this.setScrollViewRef}
    showsHorizontalScrollIndicator={false}>
     <DraftPick onPress={this.handlePress} />
     <DraftPick onPress={this.handlePress} />
     ...
  </ScrollView>
}

从'react native'导入{ScrollView}；
...
setScrollViewRef=ref=>{
this.scrollView=ref；
};
handlePress=（{nativeEvent}）=>{
const{pageX，pageY}=nativeEvent；
//找出x和y
this.scrollView.scrollTo（{x，y，动画：true}）
}
render（）{
...
}

在React web应用程序中有没有一种等效的方法来实现这一点，而不是React Native？哦，对不起，我确实给了你一个Native示例。这个帖子怎么样？它可能会给出一些提示：