parsing错误:相邻的JSX元素必须封装在封闭的标记中

我试图设置我的React.js应用程序,以便它只呈现如果我设置的variables是真实的。

我的渲染function设置的方式如下所示:

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)部分(我希望当提交的variables设置为false时显示这些div)。

但是运行这个时,我得到了这个问题的错误:

 Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag 

这里有什么问题? 我可以用什么来完成这项工作?

你应该把你的组件放在一个封闭的标签之间。 也就是说:

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

代替:

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

React元素只能返回一个元素。 你必须用另一个元素标签来包装你的两个标签。

我也可以看到你的渲染函数没有返回任何东西。 这就是你的组件应该是这样的:

 var app = React.createClass({ render () { /*React element can only return one element*/ return ( <div></div> ) } }) 

另外请注意,如果在重新调用的元素内部存在语句,则不能使用。

 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)"} : {}; if(this.state.submitted==false) { return <YourJSX /> } else { return <YourOtherJSX /> } }, 

回答这个问题迟到了,但是我想这会增加解释。

发生这种情况是因为你的代码中的任何地方都是同时返回两个元素。

例如

 return( <div id="div1"></div> <div id="div1"></div> ) 

它应该被包装在一个元素中。 例如

  return( <div id="parent"> <div id="div1"></div> <div id="div1"></div> </div> ) 

更详细的解释

您的下面的jsx代码得到转换

 class App extends React.Component { render(){ return ( <div> <h1>Welcome to React</h1> </div> ); } } 

进入这个

 _createClass(App, [{ key: 'render', value: function render() { return React.createElement( 'div', null, React.createElement( 'h1', null, 'Welcome to React' ) ); } }]); 

但是,如果你这样做

 class App extends React.Component { render(){ return ( <h1>Welcome to React</h1> </div>Hi</div> ); } } 

这被转换成这个(只是为了说明的目的,实际上你会得到error : Adjacent JSX elements must be wrapped in an enclosing tag

 _createClass(App, [{ key: 'render', value: function render() { return React.createElement( 'div', null, 'Hi' ); return React.createElement( 'h1', null, 'Welcome to React' ) } }]); 

在上面的代码中,您可以看到您正在尝试从方法调用返回两次 ,这显然是错误的。

如果你不想把它包装在另一个div作为其他答案已经build议,你也可以将其包装在一个数组中,它将工作。

 // 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'. 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" />] ) 

这里是一些关键的更多信息: http : //facebook.github.io/react/docs/multiple-components.html#dynamic-children

问题

parsing错误:相邻的JSX元素必须封装在封闭的标记中

这意味着您试图以不正确的方式返回多个兄弟JSX元素。 请记住,您不是在编写HTML,而是在JSX中! 您的代码从JSX转换成JavaScript。 例如:

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

将被转译成:

 render() { return React.createElement("p", null, "foo bar"); } 

正如您所看到的,尝试根据createElement()工作方式返回多个同级组件时出现问题; 它只需要一个元素的参数并返回它。 从一个函数调用中无法expression返回两个或多个元素。


所以,如果你想知道为什么这个工程…

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

但不是这个…

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

这是因为在第一个片段中,两个元素都是<div>元素的children元素的一部分。 当他们是children一部分,那么我们可以expression无限的兄弟元素。 看看这将如何transpile:

 render() { return React.createElement( "div", null, React.createElement("p", null, "foo"), React.createElement("p", null, "bar"), React.createElement("p", null, "baz"), ); } 

解决scheme

根据你正在运行的React版本,你有几个select来解决这个问题:

  • 返回一个数组(仅React v16 +!)

    从React v16开始,React Components可以返回数组。 这与早期版本的React不同,在这个版本中,你不得不将所有的兄弟组件包装在父组件中。

    换句话说,你现在可以做到:

     render() { return [<p key={0}>foo</p>, <p key={1}>bar</p>]; } 

    这个转换成:

     return [React.createElement("p", {key: 0}, "foo"), React.createElement("p", {key: 1}, "bar")]; 

    注意上面的返回数组。 从React版本16及更高版本开始,arrays是有效的React Elements。 对于早期版本的React,数组不是有效的返回对象!

    另外请注意,以下内容无效 (您必须返回一个数组):

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

  • 将元素包装在父元素中

    另一种解决scheme涉及到创build一个将兄弟组件包装在children的父组件。 这是解决这个问题的最常见的方式,并且适用于所有版本的React。

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

    注意:再次看看这个答案的顶部,了解更多细节以及这个过程

根据React 16,我们可以将多个组件从渲染返回为一个数组。

(没有父div ),它将渲染组件作为一个大对象。

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

导入视图并在View换行。 用div封装不适合我。

 import { View } from 'react-native'; ... render() { return ( <View> <h1>foo</h1> <h2>bar</h2> </View> ); }