我可能參加聚會的時間很晚，但是我試圖以適當(dāng)?shù)姆绞綄椖繉嵤﹦討B(tài)引用，并且找到了所有答案，直到知道并不能完全滿足我的喜好，所以我想出了一個我認(rèn)為是的解決方案簡單，并使用本機和推薦的反應(yīng)方式來創(chuàng)建引用。
有時，您會發(fā)現(xiàn)文檔的編寫方式假定您具有已知的視圖數(shù)量，并且在大多數(shù)情況下此數(shù)量是未知的，因此在這種情況下，您需要一種解決問題的方法，對所需數(shù)量的未知視圖創(chuàng)建動態(tài)引用在課堂上展示
因此，我能想到并能完美工作的最簡單的解決方案是執(zhí)行以下操作
class YourClass extends component {
state={
foo:"bar",
dynamicViews:[],
myData:[] //get some data from the web
}
inputRef = React.createRef()
componentDidMount(){
this.createViews()
}
createViews = ()=>{
const trs=[]
for (let i = 1; i < this.state.myData.lenght; i++) {
let ref =`myrefRow ${i}`
this[ref]= React.createRef()
const row = (
<tr ref={this[ref]}>
<td>
`myRow ${i}`
</td>
</tr>
)
trs.push(row)
}
this.setState({dynamicViews:trs})
}
clickHandler = ()=>{
//const scrollToView = this.inputRef.current.value
//That to select the value of the inputbox bt for demostrate the //example
value=`myrefRow ${30}`
this[value].current.scrollIntoView({ behavior: "smooth", block: "start" });
}
render(){
return(
<div style={{display:"flex", flexDirection:"column"}}>
<Button onClick={this.clickHandler}> Search</Button>
<input ref={this.inputRef}/>
<table>
<tbody>
{this.state.dynamicViews}
<tbody>
<table>
</div>
)
}
}
export default YourClass
這樣，滾動條將轉(zhuǎn)到您要查找的任何行。
歡呼，希望對別人有幫助
