Meneroka cabaran pemaparan bersyarat dalam komponen tersuai React

Question

Saya menghadapi masalah dengan pemaparan bersyarat dalam komponen tersuai dalam aplikasi React saya. Saya telah berusaha untuk mencipta komponen tersuai untuk pemaparan bersyarat yang hanya menghasilkan kandungan apabila syarat tertentu dipenuhi. Berikut ialah kod semasa saya:

import React daripada 'react';

function ConditionalRenderComponent({ condition, children }) {
  kembali (
    

      {keadaan &&
    
  );
}

eksport lalai ConditionalRenderComponent;

Semasa menggunakan komponen tersuai ini, saya perhatikan bahawa kandungan itu melalui atribut children walaupun conditionsalah diakses dan dilaksanakan. Ini berbeza daripada tingkah laku menggunakan syarat &&
 Akses kepada kandungan disekat dengan betul. 

Begini cara saya menggunakan komponen tersuai:
import React, { useState, useEffect } daripada 'react';
import ConditionalRenderComponent daripada './ConditionalRenderComponent';

function App() {
  const [userData, setUserData] = useState(null);
  const isLoggedIn = userData !== null;

  useEffect(() => {
    setTimeout(() => {
      setUserData({
        nama pengguna: 'john_doe',
        e-mel: 'john@example.com'
      });
    }, 1000);
  }, []);

  kembali (
    

      
Selamat datang ke apl saya
      
        

          
Helo, {userData.username}! 
          
E-mel anda: {userData.email}
        
      
      {!isLoggedIn && 
Sila log masuk untuk mengakses data pengguna. 
}
    
  );
}

eksport Apl lalai;

Dalam contoh di atas, userData pada mulanya null dan kemudian diisi dengan data yang diambil dari pelayan. Syarat isLoggedIn 
Walau bagaimanapun, walaupun syarat Masuk adalah palsu untuk mengakses dan Memaparkan userData. Ini mengakibatkan mesej ralat: "TypeError: Tidak boleh membaca sifat null (membaca 'nama pengguna')". 
Perbandingan dengan pemaparan bersyarat standard: 
Berikut ialah perbandingan tingkah laku menggunakan pendekatan keadaan 

// Penyampaian bersyarat standard
{isLoggedIn &&
  

    
Helo, {userData.username}! 
    
E-mel anda: {userData.email}
  
)}

Seperti yang ditunjukkan dalam kod di atas, menggunakan kaedah standard dengan betul menyekat akses kepada nilai userData apabila syaratnya false. 
Saya tidak pasti mengapa perbezaan tingkah laku ini berlaku apabila menggunakan komponen tersuai dengan atribut kanak Saya telah mencuba menyahpepijat dan mencari penyelesaian tetapi saya belum menemui jawapan yang jelas lagi. 
 Sebarang pandangan atau cadangan tentang sebab ini mungkin berlaku dan cara mengubah suai komponen tersuai untuk mencapai tingkah laku pemaparan bersyarat yang diharapkan untuk atribut kanak 
Terima kasih terlebih dahulu atas bantuan anda! 

Answer 1

Mengapa ini berlaku?

Jadi saya rasa sebab mengapa ini berlaku ialah, dalam komponen ConditionalRenderComponent, elemen anak dihantar kepadanya sebagai atribut (seperti parameter kepada fungsi). Ungkapan JSX dinilai sebagai argumen kepada fungsi.

Ini bermakna walaupun keadaan palsu, condition为false，children在传递给ConditionalRenderComponent masih akan dinilai sebelum dihantar ke fungsi

.

Contoh yang mudah difahami

PlayStation（在你的左手）和数学试卷成绩Anda memberikan

(di tangan kanan anda) kepada seorang kanak-kanak dan mengatakan bahawa jika dia mendapat markah lebih daripada 90/100, dia akan mendapat PlayStation.

childrenMemandangkan kanak-kanak itu sudah boleh melihat PlayStation di tangan kiri anda (lulus

sebagai ungkapan JSX), dia sudah menggunakannya sebelum keadaan diperiksa.

childrenSekarang, jika anda mengepalkan penumbuk anda, ia sama dengan hantaran

sebagai satu fungsi, dan dia tidak boleh menilai apa yang ada di tangan kiri anda sebelum memeriksa sama ada keadaan di tangan kanan anda adalah benar.

Penyelesaian

children。这样，您可以确保只有在condition为真时才会评估childrenKami mengubah suai komponen tersuai kami dengan menggunakan fungsi sebagai elemen kanak-kanak dan bukannya memaparkan terus dalam komponen

. Dengan cara ini anda memastikan bahawa

hanya akan dinilai jika keadaan adalah benar.

Perubahan kepada ConditionalRenderComponent

function ConditionalRenderComponent({ condition, children }) {
  return (
    <div>
      {condition && children()}
    </div>
  );
}

🎜Perubahan kepada pemaparan ConditionalRenderComponent🎜

<ConditionalRenderComponent condition={isLoggedIn}>
        {() => (
          <div>
            <p>你好，{userData.username}！</p>
            <p>你的电子邮件：{userData.email}</p>
          </div>
        )}
</ConditionalRenderComponent>

Answer 2

Saya tidak mengesyorkan mencipta komponen untuk pemaparan bersyarat, tetapi jika anda mahu melakukannya, anda boleh menggunakan corak sifat pemaparan supaya fungsi itu hanya dipanggil apabila syarat itu benar. Ini menghalang ungkapan daripada dinilai serta-merta.

function If({ condition, render }) {
  if (!condition) return null;

  return render();
}

export default function App() {
  const [state, setState] = useState(null);

  useEffect(() => {
    wait(1000).then(() => {
      setState({ hello: "world" });
    });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <If condition={Boolean(state)} render={() => <p>{state.hello}</p>} />
    </div>
  );
}