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

我认为当尝试在return语句中嵌套多个Div时，也可能会出现这种复杂情况。您可能希望这样做，以确保您的组件呈现为块元素。

这是一个使用多个div正确渲染几个组件的示例。

return (
  <div>
    <h1>Data Information</H1>
    <div>
      <Button type="primary">Create Data</Button>
    </div>
  </div>
)

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

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可能对您有用。

无效： 不仅子元素

render(){
        return(
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        )
    }

有效： 子元素下的根元素

render(){
        return(
          <div>
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
          </div>
        )
    }

React组件必须包装在单个容器中，该容器可以是任何标签， 例如“ <div> .. </ div>”

您可以检查ReactCSSTransitionGroup的渲染方法

React 16以数组形式返回您的返回值，因此它应该被一个像div这样的元素包装。

错误的方法

render(){
    return(
    <input type="text" value="" onChange={this.handleChange} />

     <button className="btn btn-primary" onClick=   {()=>this.addTodo(this.state.value)}>Submit</button>

    );
}

正确的方法（您正在使用的一个div或其他元素中的所有元素）

render(){
    return(
        <div>
            <input type="text" value="" onChange={this.handleChange} />

            <button className="btn btn-primary" onClick={()=>this.addTodo(this.state.value)}>Submit</button>
        </div>
    );
}

在反应中有一个规则，即JSX表达式必须恰好具有一个最外面的元素。

错误

const para = (
    <p></p>
    <p></p>
);

正确

const para = (
    <div>
        <p></p>
        <p></p>
    </div>
);

如果不包装组件，则可以按以下方法编写。

代替：

return(
  <Comp1 />
  <Comp2 />
     );

你可以这样写：

return[(
 <Comp1 />
),
(
<Comp2 />
) ];

在React 16.0.0中，我们可以将render中的多个组件作为一个数组返回。

return ([
    <Comp1 />,
    <Comp2 />
]);

在React 16.4.0中，我们可以在Fragment标签中从render返回多个组件。分段

return (
<React.Fragment>
    <Comp1 />
    <Comp2 />
</React.Fragment>);

Future React您将能够使用此速记语法。（许多工具尚不支持它，因此您可能要显式编写<Fragment>直到工具赶上来。）

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

您应该将组件放在一个封闭标签之间，这意味着：

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

代替：

// Correct

return (
    <div>
       <Comp1 />
       <Comp2 />
    </div>
)

编辑： Per Joe Clay对Fragments API的评论

// More Correct

return (
    <React.Fragment>
       <Comp1 />
       <Comp2 />
    </React.Fragment>
)