Узнайте о самозакрывающихся тегах JSX
До сих пор вы видели, как JSX отличается от HTML ключевым способом с использованием класса className
против class для определения классов HTML. Другим важным способом, с помощью которого JSX отличается от
HTML, является идея самозакрывающегося тега. В HTML почти все теги имеют как открывающий, так и закрывающий тег:
<div></div> ; закрывающий тег всегда имеет косую черту перед именем тега, которое вы
закрываете. Тем не менее, в HTML есть специальные экземпляры, называемые «самозакрывающиеся теги», или теги, которые
не требуют как открывающего, так и закрывающего тега перед тем, как запустить другой тег. Например, тэг разрыва
строки может быть записан как <br> или как <br /> , но никогда не должен быть
записан как <br></br> , так как он не содержит никакого содержимого. В JSX правила немного
отличаются. Любой элемент JSX можно записать с помощью самозакрывающегося тега, и каждый элемент должен быть закрыт.
Например, тег разрыва строки всегда должен быть записан как <br /> , чтобы быть действительным
JSX, который может быть переписан. То же самое касается и тега <img />. А <div>
, с другой стороны, может быть записано как <div /> или <div></div> .
Разница в том, что в первой версии синтаксиса нет способа включить что-либо в <div /> . В
последующих задачах вы увидите, что этот синтаксис полезен при рендеринге компонентов React.
Исправьте ошибки в редакторе кода, чтобы он был корректным JSX и успешно переводил. Убедитесь, что вы не меняете какой-либо контент - вам нужно только закрыть теги, где они нужны.
- Компонент должен вернуть тег
div divдолжен содержать тегbrdivдолжен содержать тегhr