Jika saya menggunakan <Connector>
sekitar beberapa komponen yang memiliki atribut ref
, saya tidak dapat lagi mengaksesnya melalui this.refs
. Saya baru saja merefaktor sedikit untuk memperbaikinya - saya kira ini adalah jenis komponen cerdas versus bodoh yang sia-sia. Atau apakah saya melewatkan sesuatu yang sederhana?
komponen pintar versus bodoh
Saya rasa ya, komponen _smart_ Anda dengan Connector
seharusnya hanya membuat komponen _dumb_ dan meneruskan props
kepada mereka.
@cymen Anda dapat menggunakan panggilan balik ref untuk ini :)
const decorator = (Base) => {
return class {
render() {
return <Base {...this.props} />
}
}
}
<strong i="7">@decorator</strong>
class Test {
render () {
return <div ref={this.props.refCallback}>my div</div>;
}
}
class Wrapper {
componentWillMount() {
this.nestedRef = null;
}
componentDidMount() {
console.log(React.findDOMNode(this.nestedRef));
}
setNestedRef = (ref) => {
this.nestedRef = ref;
}
render() {
return <Test refCallback={this.setNestedRef} />
}
}
Di atas akan mencatat div. Mungkin ini membantu?
Ini menggunakan dekorator, tetapi mungkin akan bekerja dengan baik jika Anda meneruskan callback ke komponen yang Anda masukkan ke dalam Connector
. Di dalam callback, Anda dapat menetapkan ref kembali ke komponen Anda.
Apakah Anda benar-benar membutuhkan ref bersarang?
Jika Anda hanya ingin mengakses simpul DOM, Anda dapat melakukan findDOMNode
pada komponen luar dan itu akan bekerja dengan baik. (Mereka akan menunjuk ke node yang sama.)
Jika Anda ingin memanggil metode, pertimbangkan untuk menggunakan props
sebagai antarmuka deklaratif. Lihat juga https://github.com/jsstyles/react-jss/issues/15 untuk diskusi tentang ini.
Terakhir, jika Anda _certain_ Anda memerlukan referensi, ya, Anda dapat mengambil ref bersarang seperti @johanneslumpe yang disarankan di https://github.com/gaearon/redux/issues/183#issuecomment -115988937.
Sebagai penutup, beri tahu saya jika ada yang tidak jelas.
Maaf, tapi saya tidak melihat bagaimana mendorong penggunaan 'findDOMNode' dalam kasus sepele seperti itu bahkan dapat dianggap sebagai solusi. Ini adalah anti pola! Ini mengembalikan kita ke hari-hari jquery di mana kita perlu mengakses semua elemen dan tahu persis hierarki node. Dokumen Anda berhak membaca:
'findDOMNode () adalah pintu keluar masuk ... penggunaan pintu keluar ini tidak dianjurkan karena menembus abstraksi komponen'
Maaf, tapi saya tidak melihat bagaimana mendorong penggunaan 'findDOMNode' dalam kasus sepele seperti itu bahkan dapat dianggap sebagai solusi. Ini adalah anti pola! Ini mengembalikan kita ke hari-hari jquery di mana kita perlu mengakses semua elemen dan tahu persis hierarki node.
Saya tidak yakin apa yang Anda maksud. Saya mengatakan bahwa, jika Anda memerlukan referensi ke node yang dirender (misalnya, untuk menghitung offset dan ukurannya), Anda dapat menggunakan findDOMNode(this)
. Saya tidak menyarankan Anda untuk "masuk lebih dalam" atau mengubahnya.
Yang mengatakan jika Anda tidak senang dengan ini, cukup gunakan alat peraga panggilan balik ref seperti yang disarankan di atas.
Saya tidak berpikir kita harus bergantung pada findDOMNode(this)
karena itu tidak berlaku untuk React-Native.
@xvalentino findDOMNode tidak diperlukan. Lihat bit yang terkait dengan getWrappedInstance
di dokumen API .
Komentar yang paling membantu
Maaf, tapi saya tidak melihat bagaimana mendorong penggunaan 'findDOMNode' dalam kasus sepele seperti itu bahkan dapat dianggap sebagai solusi. Ini adalah anti pola! Ini mengembalikan kita ke hari-hari jquery di mana kita perlu mengakses semua elemen dan tahu persis hierarki node. Dokumen Anda berhak membaca:
'findDOMNode () adalah pintu keluar masuk ... penggunaan pintu keluar ini tidak dianjurkan karena menembus abstraksi komponen'