"lewa strona operatora przecinka" błąd w treści html renderowania

Question

Prosty proces;

Oto pochodzenie czyni metodę chcę go mieć (chcę mój stół poza div):

ale JSX kompilator nie pozwoli go z jakiegoś powodu?

ale jeśli przesunąć tabelę wewnątrz elementu div; wszystko wygląda dobrze.

, więc tylko różnica jest miejscem stołu. dlaczego jsx przeszkadza w tym procesie? dlaczego jest to konieczne?

Answer 1

W JSX, możemy zwrócić tylko jeden html elementu z return, nie może wrócić wiele elementów, jeśli chcesz wrócić wiele elementów następnie owinąć cały kod HTML w div lub przez jakikolwiek inny składnik owijarki.

To samo dzieje się w pierwszym przypadku, wracasz 2 elementy, jeden div i jeden table. kiedy owijacie je w jeden div wszystko działa poprawnie.

Ta sama zasada, którą należy przestrzegać dla komponentów conditional rendering.

Przykład:

Poprawnie:

{ 1==1 /* some condition */ ? 
    <div> 
     True 
    </div> 
: 
    <div> 
     False 
    </div> 
} 

Źle:

{ 1==1 /* some condition */ ? 
    <div> 
     True 1 
    </div> 
    <div> 
     True 2 
    </div> 
: 
    <div> 
     False 1 
    </div> 
    <div> 
     False 2 
    </div> 
} 

Answer 2

Tylko szybka zmiana. Jeśli używasz React v16.2.0 i wyżej, możesz również użyć Fragments.

return (
    <> 
     <div> 
      True 1 
     </div> 
     <div> 
      True 2 
     </div> 
    </> 
);