Javascript 基于React prop的渲染不工作

所以我有这个组件

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

从“React”导入React；
从“react dom”导入react dom；
从“./header/NeoHeader”导入NeoHeader；
从“./modal/NeoLoginModal”导入NeoLoginModal；
类。组件{
建造师（道具）{
超级（道具）；
this.state={loginModal:false}；
}
render（）{
返回（{this.state.loginModal？：null}）
}
}
ReactDOM.render(
,
document.getElementById（'react-wrapper'）
);

---

如您所见，我试图在state prop设置为true时显示组件NeoLoginModal。但是，使用Laravel mix构建会在

{this..}

开始处出现意外的令牌错误。这是在多个地方记录的一种正确方法，那么错误在哪里？

问题不在Laravel Mix中，而是在组件HTML结构中。在

React

中，不能将同级元素渲染为一级元素。为了使代码正常工作，应使用父标记包装两个子组件，例如：

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

render（）{
返回(
{this.state.loginModal？：null}
);
}