Реакция. js Ошибка синтаксического анализа: смежные элементы JSX должны быть заключены в тег. Вы хотели фрагмент JSX <> ... ? - PullRequest
Новая
       4

Реакция. js Ошибка синтаксического анализа: смежные элементы JSX должны быть заключены в тег. Вы хотели фрагмент JSX <> ... ?

1 голос
/ 25 февраля 2020

Я пытаюсь создать приложение реакции с bootstrap, которое будет показывать карты, подобные C. C. C. как отображается как 3 в строке и есть 3 строки, но я получаю эту ошибку:

Ошибка синтаксического анализа: смежные элементы JSX должны быть заключены в тег. Вы хотели фрагмент JSX <> ...?

Вот код: 

import React from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

function App() {
  return (
    <Card>
      <Card.Img variant="top"
        src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>
          This is a wider card with supporting text below as a natural lead - in to
        additional content.This content is a little bit longer.
        </Card.Text>
      </Card.Body>
    </Card>
    <Card>
      <Card.Img variant="top" src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>
          This card has supporting text below as a natural lead - in to additional
        content. {' '}
        </Card.Text>
      </Card.Body>
    </Card>
    <Card>
      <Card.Img variant="top"
        src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>123</Card.Text>
      </Card.Body>
    </Card>
  );
}

export default App;

Ответы [ 2 ]

6 голосов
/ 25 февраля 2020

Как говорит ошибка, у вас есть синтаксическая ошибка. Ваша функция (каждая функция в JavaScript) может возвращать только одно значение. Если вы расширяете то, что делает синтаксис JSX, ваша функция в настоящее время выполняет что-то вроде этого: 

return (
  React.createElement(Card, ...)
  React.createElement(Card, ...)
  React.createElement(Card, ...)
)

... что не является допустимым синтаксисом. Вам нужно либо обернуть эти <Card/> элементы в элемент контейнера, либо сделать то, что предлагает ошибка, используя фрагмент React: 

return (
  <>
    <Card .../>
    <Card .../>
    <Card .../>
  </>
);

Преимущество фрагмента состоит в том, что оно является единственным значением, но не добавляет стоимость постороннего элемента DOM.

3 голосов
/ 25 февраля 2020

Из сообщения об ошибке:

Соседние элементы JSX должны быть заключены в вмещающий тег

Это означает, что компонент не может вернуть несколько элементов JSX, только один Элемент JSX (который может иметь несколько дочерних элементов и потомков).

В настоящее время у вас есть структура basi c: 

return (
    <Card>...</Card>
    <Card>...</Card>
    <Card>...</Card>
)

Когда сообщение переходит в состояние:

Вам нужен фрагмент JSX <> ... </>?

Так что вы можете исправить это с помощью: 

return (
    <>
        <Card>...</Card>
        <Card>...</Card>
        <Card>...</Card>
    </>
)

или 

return (
    <React.Fragment>
        <Card>...</Card>
        <Card>...</Card>
        <Card>...</Card>
    </React.Fragment>
)
...