反應道具的渲染工作不

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

，正如你所看到的，我試圖展示組件NeoLoginModal時的狀態道具設置爲true。但是，使用Laravel混合構建在{this..}開始時會產生意外的令牌錯誤。這是記錄在多個地方作爲一個正確的方式來做到這一點，所以錯誤是什麼？

Answer 1

該問題不在Laravel Mix中，而是使用您的組件HTML結構。在React中，您無法將兄弟作爲第一級元素。爲了使您的代碼正常工作，您應該使用父標記包裝兩個子組件，例如：

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