React prop basierte Rendering nicht funktioniert

Question

So habe ich diese Komponente

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import NeoHeader from './header/NeoHeader'; 
import NeoLoginModal from './modal/NeoLoginModal'; 

class Neo extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {loginModal: false}; 
    } 
    render() { 
     return(<NeoHeader/> { this.state.loginModal ? <NeoLoginModal /> : null }) 
    } 
} 

ReactDOM.render(
    <Neo/>, 
    document.getElementById('react-wrapper') 
); 

und wie Sie sehen können, ich versuche die Komponente NeoLoginModal zu zeigen, wenn ein Zustand prop auf true gesetzt ist. Das Erstellen mit Laravel-Mix führt jedoch zu einem unerwarteten Token-Fehler beim Start {this..}. Dies wird an mehreren Stellen als korrekte Methode dokumentiert. Worum geht es also?

Answer 1

Das Problem liegt nicht im Laravel-Mix, sondern in der HTML-Struktur Ihrer Komponente. In React können Geschwister nicht als Elemente der ersten Ebene gerendert werden. Damit Ihr Code funktioniert, sollten Sie beide untergeordneten Komponenten mit einem übergeordneten Tag versehen, z. B .:

render() { 
    return (
     <div> 
      <NeoHeader /> 
      { this.state.loginModal ? <NeoLoginModal /> : null } 
     </div> 
    ); 
}