При работе с JSX в React или JavaScript вы можете столкнуться с сообщением об ошибке: «Элемент JSX ‘input’ не имеет соответствующего закрывающего тега». Эта ошибка возникает, когда вы забываете правильно закрыть самозакрывающийся элемент JSX. В этой статье мы рассмотрим несколько способов решения этой проблемы и предоставим примеры кода для демонстрации каждого решения. Итак, приступим!

Метод 1: правильно закройте самозакрывающийся элемент JSX

Самое простое и распространенное решение — убедиться, что вы правильно закрываете самозакрывающийся элемент JSX. Например, вместо написания следует использовать . Добавление косой черты в конце указывает на то, что элемент является самозакрывающимся.

Пример кода:

<input type="text" />

Метод 2. Используйте закрывающий тег

Пример кода:

<input type="text"></input>

Хотя этот метод действителен, важно отметить, что использование самозакрывающихся тегов считается лучшей практикой в ​​JSX.

Метод 3: проверка наличия вложенных элементов

Иногда ошибка возникает из-за вложенных элементов внутри самозакрывающегося тега. Убедитесь, что у вас нет непреднамеренно вложенных элементов. Если да, обязательно закройте их правильно.

Пример кода:

<div>
  <input type="text" />
  <span>Some text</span>
</div>

Метод 4. Проверка использования свойства компонента

Если вы используете пользовательские компоненты и передаете реквизиты, дважды проверьте, что вы передаете правильные реквизиты. Неправильное использование свойства может привести к ошибке «Входной элемент JSX не имеет соответствующего закрывающего тега».

Пример кода:

<MyComponent text="Hello" />

Метод 5. Проверка синтаксиса JSX

Наконец, просмотрите весь синтаксис JSX, чтобы выявить любые другие потенциальные ошибки. К появлению этого сообщения об ошибке могут привести опечатки, отсутствие закрывающих тегов или неправильное использование элементов JSX.

Пример кода:

<div>
  <input type="text" />
  <p>Some text</p>
</div>

Обнаружение ошибки «JSX-элемент input не имеет соответствующего закрывающего тега» в вашем коде React или JavaScript может расстроить, но ее легко исправить. Следуя методам, изложенным в этой статье, вы сможете быстро решить эту проблему. Не забудьте обратить внимание на синтаксис JSX и правильно использовать самозакрывающиеся теги. Приятного кодирования!