Sudah ada beberapa jawaban yang bagus, tetapi saya tidak berpikir mereka sudah dijelaskan dengan baik dan beberapa metode yang diberikan mengandung beberapa gotcha yang mungkin membuat orang tersandung. Jadi saya akan membahas tiga cara utama (plus satu opsi di luar topik) untuk melakukan ini dan menjelaskan pro dan kontra. Saya kebanyakan menulis ini karena Opsi 1 sangat direkomendasikan dan ada banyak potensi masalah dengan opsi itu jika tidak digunakan dengan benar.
Opsi 1: rendering bersyarat pada induknya.
Saya tidak suka metode ini kecuali Anda hanya akan membuat komponen satu kali dan meninggalkannya di sana. Masalahnya adalah itu akan menyebabkan reaksi untuk membuat komponen dari awal setiap kali Anda mengaktifkan visibilitas. Inilah contohnya. LogoutButton atau LoginButton sedang dilakukan secara kondisional di induk LoginControl. Jika Anda menjalankan ini, Anda akan melihat konstruktor dipanggil pada setiap klik tombol. https://codepen.io/Kelnor/pen/LzPdpN?editors=1111
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
class LogoutButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created logout button');
}
render(){
return (
<button onClick={this.props.onClick}>
Logout
</button>
);
}
}
class LoginButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created login button');
}
render(){
return (
<button onClick={this.props.onClick}>
Login
</button>
);
}
}
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
Sekarang Bereaksi cukup cepat dalam membuat komponen dari awal. Namun, masih harus memanggil kode Anda saat membuatnya. Jadi jika konstruktor, componentDidMount, render, dll kode Anda mahal, maka itu akan secara signifikan memperlambat menunjukkan komponen. Ini juga berarti Anda tidak dapat menggunakan ini dengan komponen stateful di mana Anda ingin status dipertahankan ketika disembunyikan (dan dipulihkan saat ditampilkan.) Satu keuntungan adalah bahwa komponen tersembunyi tidak dibuat sama sekali sampai dipilih. Jadi komponen tersembunyi tidak akan menunda pemuatan halaman awal Anda. Mungkin juga ada kasus di mana Anda INGIN komponen stateful untuk mengatur ulang ketika diaktifkan. Dalam hal ini ini adalah pilihan terbaik Anda.
Opsi 2: rendering bersyarat pada anak
Ini menciptakan kedua komponen sekaligus. Kemudian hubung singkat sisa kode render jika komponen disembunyikan. Anda juga dapat membuat hubungan pendek logika lain dalam metode lain menggunakan prop yang terlihat. Perhatikan console.log di halaman codepen. https://codepen.io/Kelnor/pen/YrKaWZ?editors=0011
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
<LoginButton isLoggedIn={isLoggedIn} onClick={this.handleLoginClick}/>
<LogoutButton isLoggedIn={isLoggedIn} onClick={this.handleLogoutClick}/>
</div>
);
}
}
class LogoutButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created logout button');
}
render(){
if(!this.props.isLoggedIn){
return null;
}
return (
<button onClick={this.props.onClick}>
Logout
</button>
);
}
}
class LoginButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created login button');
}
render(){
if(this.props.isLoggedIn){
return null;
}
return (
<button onClick={this.props.onClick}>
Login
</button>
);
}
}
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
Sekarang, jika logika inisialisasi cepat dan anak-anak tanpa kewarganegaraan, maka Anda tidak akan melihat perbedaan dalam kinerja atau fungsionalitas. Namun, mengapa membuat React membuat komponen baru setiap toggle? Namun, jika inisialisasi mahal, Opsi 1 akan menjalankannya setiap kali Anda mengaktifkan komponen yang akan memperlambat halaman saat berpindah. Opsi 2 akan menjalankan semua init komponen pada pemuatan halaman pertama. Memperlambat beban pertama itu. Harus diperhatikan lagi. Jika Anda hanya menampilkan komponen satu kali berdasarkan kondisi dan tidak mengaktifkannya, atau Anda ingin mengatur ulang ketika beralih, maka Opsi 1 baik-baik saja dan mungkin opsi terbaik.
Namun, jika memuat halaman lambat merupakan masalah, itu berarti Anda mendapat kode mahal dalam metode siklus hidup dan itu umumnya bukan ide yang baik. Anda dapat, dan mungkin harus, menyelesaikan beban halaman yang lambat dengan memindahkan kode mahal dari metode siklus hidup. Pindahkan ke fungsi async yang dimulai oleh ComponentDidMount dan minta panggil balik ke dalam variabel keadaan dengan setState (). Jika variabel status adalah nol dan komponen terlihat maka minta fungsi render mengembalikan placeholder. Kalau tidak, render data. Dengan cara itu halaman akan dimuat dengan cepat dan mengisi tab saat memuat. Anda juga dapat memindahkan logika ke orang tua dan mendorong hasilnya ke anak-anak sebagai alat peraga. Dengan begitu Anda dapat memprioritaskan tab mana yang dimuat lebih dulu. Atau cache hasil dan hanya menjalankan logika saat komponen pertama kali ditampilkan.
Opsi 3: Menyembunyikan Kelas
Bersembunyi kelas mungkin yang paling mudah untuk diterapkan. Seperti yang disebutkan, Anda hanya membuat kelas CSS dengan tampilan: tidak ada dan menetapkan kelas berdasarkan prop. Kelemahannya adalah seluruh kode dari setiap komponen tersembunyi dipanggil dan semua komponen tersembunyi dilampirkan ke DOM. (Opsi 1 sama sekali tidak membuat komponen tersembunyi. Dan Opsi 2 kode pendek sirkuit yang tidak perlu ketika komponen disembunyikan dan menghapus komponen dari DOM sepenuhnya.) Tampaknya ini lebih cepat di toggling visibilitas menurut beberapa tes yang dilakukan oleh komentator di jawaban lain tetapi saya tidak bisa berbicara tentang itu.
Opsi 4: Satu komponen tetapi ubah Alat Peraga. Atau mungkin tidak ada komponen sama sekali dan cache HTML.
Yang ini tidak akan berfungsi untuk setiap aplikasi dan ini di luar topik karena ini bukan tentang menyembunyikan komponen, tetapi ini mungkin solusi yang lebih baik untuk beberapa kasus penggunaan daripada bersembunyi. Katakanlah Anda memiliki tab. Mungkin saja untuk menulis satu Komponen Bereaksi dan gunakan saja alat peraga untuk mengubah apa yang ditampilkan di tab. Anda juga bisa menyimpan JSX untuk menyatakan variabel dan menggunakan prop untuk memutuskan JSX mana yang akan kembali dalam fungsi render. Jika JSX harus dihasilkan kemudian lakukan dan cache di orangtua dan mengirim yang benar sebagai alat. Atau hasilkan di dalam child dan temboloklah dalam status child dan gunakan alat peraga untuk memilih yang aktif.