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

javascript reactjs render

2022-08-29 22:59:18

我正在尝试设置我的应用程序，以便仅在我设置的变量为时呈现。React.jstrue

我的渲染函数的设置方式如下所示：

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)divfalse

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

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

这是什么问题？我可以使用什么来使它工作？

答案 1

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

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

相反：

// Correct

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

编辑：根据Joe Clay对Fractions API的评论

// More Correct

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

// Short syntax

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

答案 2

回答这个问题已经很晚了，但我认为它会增加解释。

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

例如

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

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

编辑 - React 16 和自有病房的最新变化：

如果您不想添加额外的 div 来换行，并希望返回多个子组件，则可以使用。React.Fragments

React.Fragments (<React.Fragments>）速度稍快一些，内存使用量也更少（无需创建额外的DOM节点，DOM树的混乱程度更低）。

例如 （在 React 16.2.0 中）

render() {
  return (
    <>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    </>
  );
}

或

render() {
  return (
    <React.Fragments>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    </React.Fragments>
  );
}

或

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}