Узнайте о самозакрывающихся тегах JSX
Удалил комментарии и закрыли теги (пропустил тег br при первой попытке не удалось, затем был исправлен), а затем попытка не удалась, но затем элемент отобразился на странице.
Ошибка произошла из-за: предоставленный элемент JSX должен отображаться как есть для узла DOM с идентификатором узла вызова.
При получении этой ошибки элемент был отображен в предварительном просмотре.
Похоже, что он отображается не с идентификатором узла вызова, а вместо корневого идентификатора.
Добавлен код: ReactDOM.render(JSX, document.getElementById('challenge-node'));
Тесты пройдены, и теперь он дважды отображается при предварительном просмотре.
Задача гласит:
Исправьте ошибки в редакторе кода, чтобы он был действительным JSX и успешно переносился. Убедитесь, что вы ничего не меняете в содержимом - вам нужно закрыть теги только там, где они необходимы.
Он не упоминает о необходимости прикрепить его к DOM и, похоже, указывает, что вам нужно только настроить разрыв строки и горизонтальную линию.
Решение:
Необходимо добавить направления для рендеринга в DOM и удалить текущий предварительный просмотр.
Или нужно настроить предварительный просмотр, чтобы он не входил в узел вызова вместо корневого идентификатора.
Или есть другое решение, о котором я пока не могу придумать.
Failed:
const JSX = (
<div>
<h2>Welcome to React!</h2><br />
<p>Be sure to close all tags!</p>
<hr />
</div>
);
Passed:
const JSX = (
<div>
<h2>Welcome to React!</h2><br />
<p>Be sure to close all tags!</p>
<hr />
</div>
);
ReactDOM.render(JSX, document.getElementById('challenge-node'));
Спасибо, что сообщили о проблеме! Я не верю, что мы должны добавлять инструкции по рендерингу компонента в DOM.
Это было бы несовместимо с поведением всех других проблем с элементами React DOM. Например, в предыдущем задании «Определить HTML-класс в JSX» для его прохождения не требуется ReactDOM.render
.
@TJBarrettJR причина, по которой добавление ReactDOM.render
в редактор кода дважды визуализировало компонент, была связана с тем, как засеянный код отображается в freeCodeCamp. Файлы имеют "основной" и "хвостовой" код. Хвост добавляется к пользовательскому коду и обычно содержит строку ReactDOM.render
, что приводит к двум визуализациям.
Линия рендеринга (показанная ниже) в настоящее время включена в семена как решение.
ReactDOM.render(JSX, document.getElementById('challenge-node'));
Он также протестирован на наличие. Я просто открою PR, модифицируя решение и удаляя тест.
Это интересно - идентификатор challenge-node
зарезервирован для упражнений, которые отображают элементы HTML в DOM; Я не уверен, как он оказался в исходном файле.
Я проверил этот ненужный ReactDOM.render[ing]
в других задачах React; других не существует.
@ jkao1, что имеет смысл о том, почему он отрисовался дважды, спасибо!
Пока что я не видел ничего необычного в других задачах, но я все еще работаю над этим.