Bagaimana dengan ini. Mari kita mendefinisikan If
komponen bantuan sederhana .
var If = React.createClass({
render: function() {
if (this.props.test) {
return this.props.children;
}
else {
return false;
}
}
});
Dan gunakan seperti ini:
render: function () {
return (
<div id="page">
<If test={this.state.banner}>
<div id="banner">{this.state.banner}</div>
</If>
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
UPDATE: Karena jawaban saya semakin populer, saya merasa berkewajiban untuk memperingatkan Anda tentang bahaya terbesar yang terkait dengan solusi ini. Seperti yang ditunjukkan dalam jawaban lain, kode di dalam <If />
komponen dieksekusi selalu terlepas dari apakah kondisinya benar atau salah. Oleh karena itu contoh berikut akan gagal jika banner
is null
(perhatikan akses properti di baris kedua):
<If test={this.state.banner}>
<div id="banner">{this.state.banner.url}</div>
</If>
Anda harus berhati-hati saat menggunakannya. Saya sarankan membaca jawaban lain untuk pendekatan alternatif (lebih aman).
UPDATE 2: Melihat ke belakang, pendekatan ini tidak hanya berbahaya tetapi juga sangat sulit. Ini adalah contoh khas ketika seorang pengembang (saya) mencoba untuk mentransfer pola dan pendekatan yang dia tahu dari satu daerah ke daerah lain tetapi tidak benar-benar berfungsi (dalam hal ini bahasa templat lain).
Jika Anda memerlukan elemen kondisional, lakukan seperti ini:
render: function () {
return (
<div id="page">
{this.state.banner &&
<div id="banner">{this.state.banner}</div>}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
Jika Anda juga membutuhkan cabang lain, cukup gunakan operator ternary:
{this.state.banner ?
<div id="banner">{this.state.banner}</div> :
<div>There is no banner!</div>
}
Itu jauh lebih pendek, lebih elegan dan aman. Saya menggunakannya sepanjang waktu. Satu-satunya kelemahan adalah bahwa Anda tidak dapat melakukan else if
percabangan semudah itu tetapi itu biasanya tidak umum.
Bagaimanapun, ini dimungkinkan berkat cara kerja operator logis dalam JavaScript. Operator logis bahkan memungkinkan trik kecil seperti ini:
<h3>{this.state.banner.title || 'Default banner title'}</h3>
else
cabang, apakah itu berhasil? Saya tidak terbiasa dengan jsx ...