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>)
}
``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 (
<>scrollToMyRef = () => window.scrollTo(0, ini.myRef.offsetTop) // menjalankan metode ini untuk mengeksekusi bergulir. } ``
String ref membahayakan kinerja, aren't composable, dan perjalanan mereka keluar (Jan 2018).
string ref memiliki beberapa masalah, yang dianggap sebagai warisan, dan cenderung dihapus dalam salah satu rilis di masa depan. [Resmi Bereaksi dokumentasi]
css /* css */ html { perilaku scroll: halus; }
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} /> }
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 (<some_logic>){
window.scrollTo(0, this.myRef.current.offsetTop);
}
}
render() {
return (
<div>
<div ref={this.myRef}></div>
</div>)
}
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"}}>
<Button onClick={this.clickHandler}> Search</Button>
<input ref={this.inputRef}/>
<table>
<tbody>
{this.state.dynamicViews}
<tbody>
<table>
</div>
)
}
}
export default YourClass
dengan cara itu scroll akan pergi ke apa baris anda cari..
sorak-sorai dan berharap untuk membantu orang lain
Anda sekarang dapat menggunakan useRef
dari bereaksi hook API
https://reactjs.org/docs/hooks-reference.html#useref
mari myRef = useRef()
``
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;
};
Khusus hook/fungsi dapat menyembunyikan rincian pelaksanaan, dan menyediakan sebuah API sederhana untuk komponen anda.
``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
``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>
)
}
}