解析错误：相邻的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中，您也可以将其包装在一个数组中，它将起作用。

// Wrong!return (  
   <Comp1 />
   <Comp2 />)

它可以写成：

// Correct!return (  
    [<Comp1 />,
    <Comp2 />])

请注意，以上内容会产生警告： Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.

这可以通过向key组件添加属性来修复，如果手动添加这些属性，则添加如下：

return (  
    [<Comp1 key="0" />,
    <Comp2 key="1" />])

以下是有关键的更多信息：组合与继承

Answer 2

对于Rect-Native开发人员。我在FlatList中的renderingItem时遇到此错误。我有两个Text组件。我在下面使用它们

renderItem = { ({item}) => 
     <Text style = {styles.item}>{item.key}</Text>
     <Text style = {styles.item}>{item.user}</Text>}

但在我把这些拖曳内部视图组件后，它对我有用。

renderItem = { ({item}) => 
   <View style={styles.flatview}>
      <Text style = {styles.item}>{item.key}</Text>
      <Text style = {styles.item}>{item.user}</Text>
   </View>
 }

您可能正在使用其他组件，但将它们放入View可能适合您。

Answer 3

很简单，我们可以使用父元素div来包装所有元素，或者我们可以使用高阶组件（HOC）的概念，即对于反应js应用程序非常有用

render() {
  return (
    <div>
      <div>foo</div>
      <div>bar</div>
    </div>
  );}

或者另一种最好的方法是HOC非常简单而不是很复杂只需在项目中添加一个文件hoc.js并简单地添加这些代码

const aux = (props) => props.children;export default aux;

现在import hoc.js文件在你想要使用的地方，现在不是用div元素包装，而是我们可以用hoc包装。

import React, { Component } from 'react';import Hoc from '../../../hoc';

    render() {
      return (
    <Hoc>
        <div>foo</div>
        <div>bar</div>
    </Hoc>
      );
    }