React: Alat peraga yang diperlukan yang disediakan dengan cloneElement masih menampilkan peringatan di konsol
Saya membuat contoh agar lebih mudah dipahami, tetapi pada dasarnya peringatan ditampilkan di konsol karena "alat peraga yang diperlukan hilang".
Alat peraga diberikan ke elemen dengan React.cloneElement jadi saya tidak berharap mendapatkan peringatan tentang alat peraga yang hilang. Saya mengerti ini bisa menjadi kasus Edge ...
https://jsfiddle.net/kdsvgbzu/1/
<A name="name" value="value">
<B></B>
</A>
class A extends React.Component {
render() {
return (
<div>
{React.Children.map(this.props.children, function(child) {
return React.cloneElement(child, {
name: this.props.name,
value: this.props.value
});
}, this)}
</div>
);
}
}
A.propTypes = {
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired
};
class B extends React.Component {
render() {
return <span>{this.props.name} : {this.props.value}</span>;
}
}
B.propTypes = {
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired
};
tleunen
Semua 3 komentar
Ini disengaja; memvalidasi alat peraga pada waktu pembuatan elemen menghasilkan kesalahan yang lebih berguna. Ini juga lebih cocok dengan perilaku sistem tipe statis seperti Flow. Yang terbaik untuk saat ini adalah dengan menandai alat peraga itu sebagai opsional. Kami juga dapat memperkenalkan fitur di masa mendatang yang disebut konteks yang akan memberikan cara lain yang didukung untuk meneruskan alat peraga dari orang tua seperti A ke anak seperti B.
sophiebits
pada 27 Jul 2015
Itulah yang saya pikir. Terima kasih @spicyj
tleunen
pada 27 Jul 2015
Saya tidak tahu apa kasus penggunaan Anda yang sebenarnya @tleunen , tetapi saya menemukan masalah ini saat menerapkan komponen yang dapat digunakan kembali yang memiliki tanggung jawab untuk memberikan alat peraga kepada anak-anaknya:
ReactDOM.render(
<NumberSelector>
<ComponentRequiringTheNumber />
</NumberSelector>
)
Pada akhirnya, saya mengatasi masalah dengan apa yang saya temukan adalah solusi yang lebih elegan:
ReactDOM.render(
<NumberSelector>
{({number}) => <ComponentRequiringTheNumber number={number} />}
</NumberSelector>
)
Saya lebih menyukainya karena ketergantungan ComponentRequiringTheNumber eksplisit, dan peran NumberSelector menjadi jelas. Dan dengan cara ini, alat peraga yang diberikan ke komponen bersarang hanya dievaluasi jika relevan.
Diterapkan ke Fiddle Anda: https://jsfiddle.net/ap1e9rk3/1/
micaste
pada 1 Mar 2017
Masalah terkait
zpao
·
3Komentar
h1orz
·
3Komentar
jvorcak
·
3Komentar
vignestion
·
3Komentar
zpao
·
3Komentar
Komentar yang paling membantu
Saya tidak tahu apa kasus penggunaan Anda yang sebenarnya @tleunen , tetapi saya menemukan masalah ini saat menerapkan komponen yang dapat digunakan kembali yang memiliki tanggung jawab untuk memberikan alat peraga kepada anak-anaknya:
Pada akhirnya, saya mengatasi masalah dengan apa yang saya temukan adalah solusi yang lebih elegan:
Saya lebih menyukainya karena ketergantungan
ComponentRequiringTheNumbereksplisit, dan peranNumberSelectormenjadi jelas. Dan dengan cara ini, alat peraga yang diberikan ke komponen bersarang hanya dievaluasi jika relevan.Diterapkan ke Fiddle Anda: https://jsfiddle.net/ap1e9rk3/1/