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

我试图设置我的React.js应用程序，以便它只呈现如果我设置的变量为真。

我的渲染函数是这样设置的:

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)部分(我希望这些div元素在提交的变量被设置为false时显示出来)。

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

解析错误:第38行:相邻的JSX元素必须被封装在一个外围标记中

这里的问题是什么?我该怎么做呢?

当前回答

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

你可以检查ReactCSSTransitionGroup的渲染方法

2018-12-14 06:50:36

其他回答

react中有一个规则，即JSX表达式必须只有一个最外层元素。

错误的

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

正确的

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

2019-04-02 12:38:34

你应该把你的组件放在一个封闭标签之间，这意味着:

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

而不是:

// Correct

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

编辑:根据Joe Clay关于Fragments API的评论

// More Correct

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

// Short syntax

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

2015-10-28 08:11:56

如果你不包装你的组件，那么你可以按照下面提到的方法来编写它。

而不是:

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

你可以这样写:

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

2019-04-17 09:42:39

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

下面是一个使用多个div正确呈现两个组件的例子。

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

2020-02-04 10:25:32

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

2018-06-28 06:11:22

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

推荐文章

最新文章

标签