JSX在react.js上相鄰

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

Answer 2

您需要將所有渲染包裝成某種東西，例如Fragment或div

return (
      <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>
        </Fragment>
    );