基于 React 道具的渲染不起作用答案

【问题标题】：React prop based rendering not working基于 React 道具的渲染不起作用
【发布时间】：2017-05-16 21:34:24
【问题描述】：

所以我有这个组件

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

如您所见，当 state 属性设置为 true 时，我试图显示组件 NeoLoginModal。但是，使用 Laravel mix 构建会在 {this..} 开始时出现意外的令牌错误。这是在多个地方记录的正确方法，那么错误是什么？

【问题讨论】：

标签： javascript reactjs laravel-mix

【解决方案1】：

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

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

【讨论】：