滚动到特定元素（映射一些数据后）答案

【问题标题】：Scrolling to specific element (after map some data) React滚动到特定元素（映射一些数据后）
【发布时间】：2021-06-16 17:12:34
【问题描述】：

我尝试使用 ref，但它不起作用 - 只能滚动到网站底部。到处找了也没找到解决办法，只针对没有map方法的list项。

data = [
{id:1, name: "Paul"},
{id:2, name: "Judy"},
{id:3, name: "Thomas"},
]

class NamesList extends Component {

myRef = React.createRef()  
scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)

return(
<div>
<ul>
{data.map(user => 
<li key={user.id} onClick={this.scrollToMyRef}>{user.name}</li>
}
</ul>

///CONTENT

<ul>
{data.map(user => 
<li key={user.id} ref={this.myRef}>{user.name}</li>
}
</ul>
</div>
)
}

【问题讨论】：

在这些帖子上你可以找到你的答案stackoverflow.com/questions/11715646/…
谢谢，但不幸的是我正在寻找的解决方案不存在
如果您只需要滚动特定元素，那么您将如何确定该元素。请说明。之后才能正确给出答案。

标签： javascript arrays reactjs react-native ref

【解决方案1】：

试试这个代码。这里我在ul里面加了一个空白的div，并给出了引用。

///内容

<ul>
{
data.map(user => 
<li key={user.id}>{user.name}</li>
}
<div ref={this.myRef} />
</ul>

并将scrollToMyRef()更改如下。

const scrollToMyRef() = () => this.myRef.current.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });

【讨论】：