除了最后添加的内容之外,无法使用 useRef/createRef 来获取任何其他 div。当单击按钮时,我怎样才能做到这一点,div 的引用发生了变化。
我已经尝试过 useRef 和 createRef。因为我想创建一个新的 ref 实例,所以我更多地研究了 createRef 而不是 useRef。我也玩过useEffect。但我的解决方案并没有帮助我解决我最大的问题
我制作了一个包含 3 个组件的小项目,以帮助您理解我要解释的内容。
我还有一个包含模拟数据的数据库-> 在我的真实项目中这不是问题。它是一个包含对象的数组。[{'id':'1', 'name':'first'},...]
主要的:
const MainComponent = () => {
const dataRef = React.createRef(null)
React.useEffect (() => {
if(dataRef && dataRef.current){
dataRef.current.scrollIntoView({ behavior:'smooth', block:'start' })
}
},[dataRef])
const _onClick = (e) => {
dataRef.current.focus();
}
return(
<>
{data && data.map((entry, index) =>{
return <ButtonList
key={index}
entry={entry}
onClick={_onClick}
/>
})}
{data && data.map((entry, index) =>{
return <ListingAllData
key={index}
dataRef={dataRef}
entry={entry}
index={index}/>
})}
</>
)
}
按钮组件
const ButtonList = ({ entry, onClick }) => {
return <button onClick={onClick}>{entry.name}</button>
}
列出数据组件
const ListingAllData = (props) => {
const {entry, dataRef } = props;
return (
<div ref={dataRef}>
<p>{entry.id}</p>
<p>{entry.name}</p>
</div>
);
}
我已经控制台记录了 data.current,它只获取最后一个元素。我希望它会为我单击的按钮获取一个。