语义-UI-反应语法错误：相邻JSX元素必须被包裹在封闭标记

我使用语义-UI-反应以建立一个新的用户的一种形式：语义-UI-反应语法错误：相邻JSX元素必须被包裹在封闭标记

import React from 'react'; 
import { Form } from 'semantic-ui-react'; 
import {createUser} from '../../../actions/userAction'; 

class UserAddModalForm extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    handleSubmit(event, props) { 
    event.preventDefault(); 
    let body = { 
     lastname: event.target.lastName.value, 
     firstname: event.target.firstName.value, 
     username: event.target.userName.value, 
     email: event.target.email.value, 
    } 
    props.dispatch(createUser(body)); 
    props.onCancel(); 
    } 

    render() { 
    return(
     <div> 
     <Form onSubmit={ (event) => this.handleSubmit(event, this.props)> 
      <Form.Field> 
      <label>Last Name</label> 
      <input name='lastName' /> 
      </Form.Field> 
      <Form.Field> 
      <label>First Name</label> 
      <input name='firstName' /> 
      </Form.Field> 
      <Form.Field> 
      <label>Username</label> 
      <input name='userName' /> 
      </Form.Field> 
      <Form.Field> 
      <label>Email Address</label> 
      <input name='email' /> 
      </Form.Field> 
      <Button type='submit'>Submit</Button> 
      <Button onClick={ this.props.onCancel }>Cancel</Button> 
     </Form> 
     </div> 
    ) 
    } 
} 

export default UserAddModalForm;

当我建立我收到此错误：

./src/components/ui/users/UserAddModalForm.js 
Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag (30:10) 

    28 |    <input name='lastName' /> 
    29 |   </Form.Field> 
> 30 |   <Form.Field> 
    |   ^
    31 |    <label>First Name</label> 
    32 |    <input name='firstName' /> 
    33 |   </Form.Field>

我周围，就用Google搜索我可以告诉我附上我JSX元素在一个div。我在应用程序的其他部分使用了语义反馈组件，没有任何错误，我不知道为什么构建会挂在这个上。

任何和所有的帮助将不胜感激。谢谢。

来源

2017-10-06 salols

您忘记关闭您提交的功能。添加一个结束大括号 – fungusanthrax

@fungusanthrax - 基督我一直在寻找这个40分钟，谢谢 – salols

请注意当你收到一个看起来没问题的区域的错误时，通常错误位于该区域上方，编译器运行代码，这是错误发生的地方，因为有些东西破坏了它以上 – fungusanthrax

<Form onSubmit={ (event) => this.handleSubmit(event, this.props)>

应该

<Form onSubmit={ (event) => this.handleSubmit(event, this.props)}>

来源

2017-10-06 17:21:06 fungusanthrax

语义-UI-反应语法错误：相邻JSX元素必须被包裹在封闭标记

回答

相关问题