解析错误：相邻的JSX元素必须包装在一个封闭的标记中

Question

解析错误：相邻的JSX元素必须包装在一个封闭的标记中

我正在尝试设置我的React.js应用程序，以便只有在我设置的变量为true时才会呈现。

我的渲染功能的设置方式如下：

render: function() {
    var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
    var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    return (
    <div>if(this.state.submitted==false) {

      <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
      <div className="button-row">
         <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
     </div>
     </ReactCSSTransitionGroup>}
   </div>
    )
  },

基本上，这里的重要部分是if（this.state.submitted == false）部分（我希望在提交的变量设置为false时显示这些div）。

但是在运行时，我在问题中得到了错误：

未捕获的错误：解析错误：第38行：相邻的JSX元素必须包装在一个封闭的标记中

这是什么问题？我可以用什么来完成这项工作？

Answer 1

如果您不想像其他答案所建议的那样将其包装在另一个div中，您也可以将其包装在一个数组中，它将起作用。//&nbsp;Wrong!return&nbsp;(&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<Comp1&nbsp;/> &nbsp;&nbsp;&nbsp;<Comp2&nbsp;/>)它可以写成：//&nbsp;Correct!return&nbsp;(&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;[<Comp1&nbsp;/>, &nbsp;&nbsp;&nbsp;&nbsp;<Comp2&nbsp;/>])请注意，以上内容会产生警告：&nbsp;Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.这可以通过向key组件添加属性来修复，如果手动添加这些属性，则添加如下：return&nbsp;(&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;[<Comp1&nbsp;key="0"&nbsp;/>, &nbsp;&nbsp;&nbsp;&nbsp;<Comp2&nbsp;key="1"&nbsp;/>])以下是有关键的更多信息：组合与继承

Answer 2

对于Rect-Native开发人员。我在FlatList中的renderingItem时遇到此错误。我有两个Text组件。我在下面使用它们renderItem&nbsp;=&nbsp;{&nbsp;({item})&nbsp;=>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Text&nbsp;style&nbsp;=&nbsp;{styles.item}>{item.key}</Text> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Text&nbsp;style&nbsp;=&nbsp;{styles.item}>{item.user}</Text>}但在我把这些拖曳内部视图组件后，它对我有用。renderItem&nbsp;=&nbsp;{&nbsp;({item})&nbsp;=>&nbsp; &nbsp;&nbsp;&nbsp;<View&nbsp;style={styles.flatview}> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Text&nbsp;style&nbsp;=&nbsp;{styles.item}>{item.key}</Text> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Text&nbsp;style&nbsp;=&nbsp;{styles.item}>{item.user}</Text> &nbsp;&nbsp;&nbsp;</View> &nbsp;}您可能正在使用其他组件，但将它们放入View可能适合您。

Answer 3

很简单，我们可以使用父元素div来包装所有元素，或者我们可以使用高阶组件（HOC）的概念，即对于反应js应用程序非常有用render()&nbsp;{ &nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>foo</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>bar</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;);}或者另一种最好的方法是HOC非常简单而不是很复杂只需在项目中添加一个文件hoc.js并简单地添加这些代码const&nbsp;aux&nbsp;=&nbsp;(props)&nbsp;=>&nbsp;props.children;export&nbsp;default&nbsp;aux;现在import hoc.js文件在你想要使用的地方，现在不是用div元素包装，而是我们可以用hoc包装。import&nbsp;React,&nbsp;{&nbsp;Component&nbsp;}&nbsp;from&nbsp;'react';import&nbsp;Hoc&nbsp;from&nbsp;'../../../hoc'; &nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;<Hoc> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>foo</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>bar</div> &nbsp;&nbsp;&nbsp;&nbsp;</Hoc> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;}