Ожидается соответствующий закрывающий тег JSX для ввода Reactjs

При создании компонента в Reactjs с полями ввода возникает ошибка Error: Parse Error: Line 47: Expected corresponding JSX closing tag for input at http://localhost/chat-react/src/script.js:47:20 </div>

var Main = React.createClass({
    render: function() {
        return (
            <div className="card-action">
                <i class="mdi-action-account-circle prefix"></i>
                <input id="icon_prefix" type="text" class="validate">
            </div>
        );
    }
});

reactjs javascript reactjs-flux react-jsx
person Sajin M Aboobakkar    schedule 15.06.2015    source источник

Ответы (6)


arrow_upward
148
arrow_downward

Вам нужно закрыть элемент ввода с помощью /> в конце.

<input id="icon_prefix" type="text" class="validate" />
person Crob    schedule 15.06.2015
comment
Могу я спросить почему ?, (я новичок в этой теме) - person Pedro; 13.04.2019
comment
@pedro Если тег пуст (без дочерних элементов), это сокращенный способ закрыть элемент без создания соответствующего закрывающего элемента. Так что вместо: <div></div>. вы можете просто сделать <div />. Подробнее см. Здесь: reactjs.org/docs/ - person Jose Browne; 18.07.2019
comment
У меня был <br>, и это вызывало проблему (вместо этого ожидалось <br />). Это странно, потому что в спецификации HTML5 не рекомендуется использовать начальную косую черту для самозакрывающихся тегов. - person Cristian Traìna; 06.07.2020
comment
@ CristianTraìna Важно помнить, что JSX - это не HTML. JSX - это отдельная вещь. За кулисами все преобразуется в React.createElement, и от закрытия каждого элемента зависит, как объекты должны быть вложены. - person Crob; 08.07.2020

arrow_upward
12
arrow_downward

Это случается, когда мы не закрываем html-тег.

Убедитесь, что все теги HTML закрыты.

В моем случае это был тег <br>. Это должно быть <br />.

Попробуйте временно удалить фрагмент кода, пока не обнаружите, какой закрывающий тег html отсутствует.

person Yuvraj Patil    schedule 22.07.2019

arrow_upward
8
arrow_downward

Эта ошибка также возникает, если вы указали неправильный порядок компонентов.

Пример: это неправильно:

 <ComponentA> 
    <ComponentB> 

    </ComponentA> 
 </ComponentB>

правильный путь:

  <ComponentA> 
    <ComponentB>

    </ComponentB>  
  </ComponentA>
person Deke    schedule 09.12.2018

arrow_upward
2
arrow_downward

Все теги должны иметь закрывающие теги. В моем случае элементы hr и input не были закрыты должным образом.

Родительская ошибка: элемент JSX 'div' не имеет соответствующего закрывающего тега из-за кода ниже:

<hr class="my-4">
<input
  type="password"
  id="inputPassword"
  class="form-control"
  placeholder="Password"
  required
 >

Исправить:

<hr class="my-4"/>
<input
 type="password"
 id="inputPassword"
 class="form-control"
 placeholder="Password"
 required
/>

В родительских элементах будут отображаться ошибки из-за ошибок дочерних элементов. Поэтому начните исследовать от большинства внутренних элементов до родительских.

person Eugen Sunic    schedule 19.10.2019

arrow_upward
1
arrow_downward

Вы должны закрыть все теги, например, и т. Д., Чтобы это не отображалось.

person gaurav rathor    schedule 21.06.2019
comment
Пожалуйста, объясните, как и почему это решает проблему, это действительно поможет улучшить качество вашего сообщения. - person Android; 21.06.2019

arrow_upward
0
arrow_downward

Вам нужно закрыть элемент ввода с помощью /> в конце. В React мы должны закрыть каждый элемент. Ваш код должен быть:

<input id="whatever-id" type="text" class="validate" />
person Jamal Sheikh Ali    schedule 29.07.2020
comment
Я думаю, вы имели в виду class="validate" /> вместо class="validate/"> в конце - person Ecks Dee; 11.11.2020