解析错误:相邻的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元素必须被封装在一个外围标记中

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

当前回答

很简单，我们可以使用父元素div来包装所有元素或者我们可以使用高阶分量(HOC)的概念，即非常有用的 React js应用程序

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

或者另一种最好的方法是HOC，它非常简单，不太复杂只需在你的项目中添加一个hoc.js文件，并简单地添加这些代码

const aux = (props) => props.children;
export default aux;

现在导入hoc.js文件到你想要使用的地方，而不是用div包装元素，我们可以用hoc来包装。

import React, { Component } from 'react';
import Hoc from '../../../hoc';

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

2019-05-14 06:29:08

其他回答

如果你不想像其他答案建议的那样把它包装在另一个div中，你也可以把它包装在一个数组中，它会工作。

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

可以写成:

// Correct!
return (  
    [<Comp1 />,
    <Comp2 />]
)

警告:数组或迭代器中的每个子元素都应该有一个唯一的“key”道具。检查“YourComponent”的渲染方法。

这可以通过为组件添加一个key属性来修复，如果手动添加这些属性，则如下所示:

return (  
    [<Comp1 key="0" />,
    <Comp2 key="1" />]
)

这里有更多关于键的信息:组合与继承

2016-05-10 07:35:46

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

你可以检查ReactCSSTransitionGroup的渲染方法

2018-12-14 06:50:36

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

// 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

React元素只能返回一个元素。您必须用另一个元素标记来包装两个标记。

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

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

还要注意，你不能在返回的元素中使用if语句:

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 />
    }
},

2015-07-08 07:02:45

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元素必须封装在一个封闭标记中

推荐文章

最新文章

标签