javascript - React.js 上的 JSX 相邻

Question

下面的代码分为两部分，一部分处理头部的管理，另一部分处理“主体”，当我执行代码时引发下面的异常，我该如何解决该错误？我不知道下面的错误是什么原因造成的，错误是在react的解析上

错误:

  Line 48:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

         <Link rel="stylesheet" type="text/css" href="css/main.css" />
     </HeadProvider>

代码:

import * as React from 'react';
import { Button, Form, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import logo from './logo.svg';
import { HeadProvider, Title, Link, Meta } from 'react-head';

import './Home.css';

class Home extends Component {
  ...

  render() {
    return (
      <HeadProvider>
        <Meta charset="UTF-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
        <Link rel="icon" type="image/png" href="images/icons/favicon.ico" />
        <Link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
        <Link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css" />
        <Link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/animate/animate.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css" />
        <Link rel="stylesheet" type="text/css" href="css/util.css" />
        <Link rel="stylesheet" type="text/css" href="css/main.css" />
      </HeadProvider>
        <div className="Login">
          <Form onSubmit={this.handleSubmit}>
            <Form.Group controlId="email" bsSize="large">
              <label> Email: </label>
              <Form.Control
                autoFocus
                type="email"
                value={this.state.email}
                onChange={this.handleChange}
              />

            </Form.Group>
            <br></br>
            <Form.Group controlId="password" bsSize="large">
              <label> Password: </label>
              <Form.Control
                value={this.state.password}
                onChange={this.handleChange}
                type="password"
              />
            </Form.Group>
            <Button
              block
              bsSize="large"
              disabled={!this.validateForm()}
              type="submit"
            >
              Login
              </Button>
          </Form>
        </div>
    );
  }
}

export default Home;

Answer 1

您正在尝试从渲染函数返回多个元素。您必须仅返回一个元素。您可以通过包装 <HeadProvider> 来解决此问题和<div className="Login">在父级 div或在 React.Fragment :

render() {
    return (
        <React.Fragment>
            <HeadProvider>
                <Meta charset="UTF-8"/>
                <Meta name="viewport" content="width=device-width, initial-scale=1"/>
                <Link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
                <Link rel="stylesheet" type="text/css"
                      href="vendor/bootstrap/css/bootstrap.min.css"/>
                <Link rel="stylesheet" type="text/css"
                      href="fonts/font-awesome-4.7.0/css/font-awesome.min.css"/>
                <Link rel="stylesheet" type="text/css"
                      href="fonts/iconic/css/material-design-iconic-font.min.css"/>
                <Link rel="stylesheet" type="text/css" href="vendor/animate/animate.css"/>
                <Link rel="stylesheet" type="text/css"
                      href="vendor/css-hamburgers/hamburgers.min.css"/>
                <Link rel="stylesheet" type="text/css"
                      href="vendor/animsition/css/animsition.min.css"/>
                <Link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css"/>
                <Link rel="stylesheet" type="text/css"
                      href="vendor/daterangepicker/daterangepicker.css"/>
                <Link rel="stylesheet" type="text/css" href="css/util.css"/>
                <Link rel="stylesheet" type="text/css" href="css/main.css"/>
            </HeadProvider>
            <div className="Login">
                <Form onSubmit={this.handleSubmit}>
                    <Form.Group controlId="email" bsSize="large">
                        <label> Email: </label>
                        <Form.Control
                            autoFocus
                            type="email"
                            value={this.state.email}
                            onChange={this.handleChange}
                        />

                    </Form.Group>
                    <br></br>
                    <Form.Group controlId="password" bsSize="large">
                        <label> Password: </label>
                        <Form.Control
                            value={this.state.password}
                            onChange={this.handleChange}
                            type="password"
                        />
                    </Form.Group>
                    <Button
                        block
                        bsSize="large"
                        disabled={!this.validateForm()}
                        type="submit"
                    >
                        Login
                    </Button>
                </Form>
            </div>
        </React.Fragment>
    );
}