は小道具

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では、兄弟を第1レベルの要素としてレンダリングすることはできません。コードを機能させるには、両方の子コンポーネントを親タグでラップする必要があります。例：

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