ReactJS cara untuk menggulir ke elemen
Aku punya chat widget yang menarik array pesan setiap kali aku gulir ke atas. Masalah yang saya hadapi sekarang adalah, slider tetap tetap di atas ketika pesan beban, saya ingin fokus pada indeks terakhir elemen dari sebelumnya array. Saya tahu bahwa saya dapat membuat dinamis refs dengan melewati index, tapi saya juga perlu tahu apa jenis fungsi scroll yang digunakan untuk mencapai yang
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}Hanya menemukan posisi teratas dari elemen anda've sudah ditentukan https://www.w3schools.com/Jsref/prop_element_offsettop.asp kemudian gulir ke posisi ini melalui scrollTo metode https://www.w3schools.com/Jsref/met_win_scrollto.asp
Hal seperti ini harus bekerja:
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
window.scrollTo(0, tesNode.offsetTop);
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}UPDATE:
karena Bereaksi v16.3 the Bereaksi.createRef() lebih disukai
constructor(props) {
super(props);
this.myRef = React.createRef();
}
handleScrollToElement(event) {
if (){
window.scrollTo(0, this.myRef.current.offsetTop);
}
}
render() {
return (
<div>
<div ref={this.myRef}></div>
</div>)
}ini bekerja untuk saya
this.anyRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })Menggunakan findDOMNode akan menjadi usang pada akhirnya.
Metode yang lebih disukai adalah dengan menggunakan callback ref.
Anda juga dapat menggunakan scrollIntoView metode untuk gulir ke elemen tertentu.
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
tesNode.scrollIntoView();
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}Aku mungkin terlambat tapi aku mencoba untuk menerapkan dinamis ref untuk proyek saya dengan cara yang tepat dan semua jawaban yang saya telah menemukan sampai tahu tidak't tenang memuaskan sesuai dengan keinginan saya, jadi saya datang dengan solusi yang saya pikir adalah sederhana dan menggunakan asli dan cara yang disarankan untuk bereaksi untuk membuat ref.
kadang-kadang anda menemukan bahwa cara dokumentasi adalah menulis mengasumsikan bahwa anda memiliki jumlah yang diketahui dari pandangan dan dalam kebanyakan kasus jumlah ini tidak diketahui sehingga anda perlu cara untuk memecahkan masalah dalam hal ini, membuat dinamis ref untuk diketahui jumlah views yang anda butuhkan untuk menunjukkan di kelas
jadi solusi yang paling sederhana yang saya bisa berpikir dan bekerja dengan sempurna adalah sebagai berikut
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"}}>
Search
<input ref={this.inputRef}/>
<table>
<tbody>
{this.state.dynamicViews}
<tbody>
<table>
</div>
)
}
}
export default YourClassdengan cara itu scroll akan pergi ke apa baris anda cari..
sorak-sorai dan berharap untuk membantu orang lain
Anda bisa mencoba cara ini:
handleScrollToElement = e => {
const elementTop = this.gate.offsetTop;
window.scrollTo(0, elementTop);
};
render(){
return(
<h2 ref={elem => (this.gate = elem)}>Payment gate</h2>
)}Anda sekarang dapat menggunakan useRef dari bereaksi hook API
https://reactjs.org/docs/hooks-reference.html#useref
deklarasi
mari myRef = useRef()
komponen
``
Gunakan
jendela.scrollTo({ behavior: 'halus', atas: myRef.saat ini.offsetTop })
Anda dapat menggunakan sesuatu seperti componentDidUpdate
componentDidUpdate() {
var elem = testNode //your ref to the element say testNode in your case;
elem.scrollTop = elem.scrollHeight;
};Jul 2019 - Dedicated hook/fungsi
Khusus hook/fungsi dapat menyembunyikan rincian pelaksanaan, dan menyediakan sebuah API sederhana untuk komponen anda.
Bereaksi 16.8 + Komponen Fungsional
``js const useScroll = () => { const htmlElRef = useRef(null) const executeScroll = () => window.scrollTo(0, htmlElRef.saat ini.offsetTop)
kembali [executeScroll, htmlElRef]
}
Menggunakannya dalam setiap komponen fungsional.
const ScrollDemo = () => {
const [executeScroll, htmlElRef] = useScroll()
useEffect(executeScroll, []) // Berjalan setelah komponen gunung
kembali
Bereaksi 16.3 + Komponen kelas
``js const utilizeScroll = () => { const htmlElRef = Bereaksi.createRef() const executeScroll = () => window.scrollTo(0, htmlElRef.saat ini.offsetTop)
kembali {executeScroll, htmlElRef}
}
Menggunakannya di setiap kelas komponen. js
kelas ScrollDemo meluas Komponen {
konstruktor(){
ini.elScroll = utilizeScroll()
}
componentDidMount(){ ini.elScroll.executeScroll() }
render(){ kembali
Apa yang bekerja untuk saya:
class MyComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef(); // Create a ref
}
// Scroll to ref function
scrollToMyRef = () => {
window.scrollTo({
top:this.myRef.offsetTop,
// behavior: "smooth" // optional
});
};
// On component mount, scroll to ref
componentDidMount() {
this.scrollToMyRef();
}
// Render method. Note, that `div` element got `ref`.
render() {
return (
<div ref={this.myRef}>My component</div>
)
}
} <div onScrollCapture={() => this._onScrollEvent()}></div>
_onScrollEvent = (e)=>{
const top = e.nativeEvent.target.scrollTop;
console.log(top);
}
Bereaksi 16.8 +, komponen Fungsional
``bej const scrollToRef = (ref) => window.scrollTo(0, ref.saat ini.offsetTop) // Umum gulir ke elemen fungsi
const ScrollDemo = () => {
const myRef = useRef(null) const executeScroll = () => scrollToRef(myRef)
return (
``
Klik di sini untuk demo penuh pada StackBlits
Bereaksi 16.3 +, komponen Kelas
``bej kelas ReadyToScroll meluas Komponen {
konstruktor(alat peraga) { super(alat peraga) ini.myRef = Bereaksi.createRef() }
render() { kembali
}scrollToMyRef = () => window.scrollTo(0, ini.myRef.saat ini.offsetTop) // menjalankan metode ini untuk mengeksekusi bergulir.
} ``
Kelas komponen - Ref callback
``bej kelas ReadyToScroll meluas Komponen { myRef=null // Opsional
render() { kembali <div ref={ (ref) => ini.myRef=ref }>
scrollToMyRef = () => window.scrollTo(0, ini.myRef.offsetTop) // menjalankan metode ini untuk mengeksekusi bergulir. } ``
Don't menggunakan String ref.
String ref membahayakan kinerja, aren't composable, dan perjalanan mereka keluar (Jan 2018).
resource1resource2
Opsional: Mulus animasi scroll
css /* css */ html { perilaku scroll: halus; }Lewat ref untuk anak
Kami ingin wasit yang akan melekat pada elemen dom, tidak bereaksi dengan komponen. Jadi, ketika melewati seorang anak komponen kita dapat't nama prop ref.
bej const MyComponent = () => { const myRef = useRef(null) kembali <ChildComp refProp={myRef}></ChildComp> }Kemudian pasang ref prop untuk elemen dom.
bej const ChildComp = (alat peraga) => { kembali <div ref={alat peraga.refProp} /> }