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