基于反应支柱的渲染不起作用

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构建在{this..}启动时会出现一个意外的令牌错误。这是记录在多个地方作为一种正确的方式来做到这一点，那么错误是什么呢？

Answer 1

问题不在于Laravel，而在于您的组件HTML结构。在React中，不能将兄弟姐妹呈现为第一级元素。为了使代码正常工作，应该使用父标记包装两个子组件，例如：

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