이 소품

Question

작동하지 렌더링 기반의 반응 그래서 나는이 구성 요소를

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') 
); 

을 가지고 당신이 볼 수 있듯이, 나는 상태 소품이 true로 설정된 경우 구성 요소 NeoLoginModal을 보여주기 위해 노력하고있어. 그러나 Laravel mix로 빌드하면 {this..} 시작시 예기치 않은 토큰 오류가 발생합니다. 이 작업을 수행하는 올바른 방법으로 여러 곳에서 문서화되었으므로 오류가 무엇입니까?

Answer 1

문제는 Laravel Mix가 아니라 구성 요소 HTML 구조에 있습니다. React에서는 형제를 첫 번째 요소로 렌더링 할 수 없습니다. 코드를 작동 시키려면 두 하위 구성 요소를 상위 태그로 묶어야합니다 (예 :

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

).