Ожидаемый соответствующий тег закрытия 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>
        );
    }
});

Ответ 1

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

<input id="icon_prefix" type="text" class="validate" />

Ответ 2

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

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

 <ComponentA> 
    <ComponentB> 

    </ComponentA> 
 </ComponentB>

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

  <ComponentA> 
    <ComponentB>

    </ComponentB>  
  </ComponentA>

Ответ 3

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

Ответ 4

Это происходит, когда мы не закрываем HTML-тег.

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

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

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

Ответ 5

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

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

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

Fix:

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

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