3.6 KiB
3.6 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24bbe0dba28a8d3cbd4c5f | Render HTML Elements to the DOM | 6 | false | Выделение HTML-элементов в DOM |
Description
ReactDOM.render(componentToRender, targetNode)
, где первым аргументом является элемент React или компонент, который вы хотите отобразить, а второй аргумент - узел DOM что вы хотите отобразить компонент. Как и следовало ожидать, ReactDOM.render()
должен вызываться после объявлений элементов JSX, так же, как вы должны объявлять переменные перед их использованием. Instructions
ReactDOM.render()
чтобы отобразить этот компонент на странице. Вы можете передать определенные элементы JSX непосредственно в качестве первого аргумента и использовать document.getElementById()
чтобы выбрать узел DOM для их рендеринга. Для вас доступен div
с id='challenge-node'
. Убедитесь, что вы не изменяете константу JSX
. Tests
tests:
- text: Постоянный <code>JSX</code> должен возвращать элемент <code>div</code> .
testString: 'assert(JSX.type === "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
- text: <code>div</code> должен содержать тег <code>h1</code> как первый элемент.
testString: 'assert(JSX.props.children[0].type === "h1", "The <code>div</code> should contain an <code>h1</code> tag as the first element.");'
- text: В <code>div</code> должен быть тег <code>p</code> как второй элемент.
testString: 'assert(JSX.props.children[1].type === "p", "The <code>div</code> should contain a <code>p</code> tag as the second element.");'
- text: 'При условии , JSX элемент должен оказывать узел DOM с идентификатором <code>challenge-node</code> .'
testString: 'assert(document.getElementById("challenge-node").childNodes[0].innerHTML === "<h1>Hello World</h1><p>Lets render this to the DOM</p>", "The provided JSX element should render to the DOM node with id <code>challenge-node</code>.");'
Challenge Seed
const JSX = (
<div>
<h1>Hello World</h1>
<p>Lets render this to the DOM</p>
</div>
);
// change code below this line
Solution
// solution required