2.1 KiB
2.1 KiB
id, title, challengeType, forumTopicId, dashedName
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24bbe0dba28a8d3cbd4c5f | 渲染 HTML 元素爲 DOM 樹 | 6 | 301406 | render-html-elements-to-the-dom |
--description--
到目前爲止,已經瞭解到 JSX 是一種在 JavaScript 中編寫可讀 HTML 的便捷工具。 在 React 中,可以使用它的的渲染 API(ReactDOM)將此 JSX 直接渲染到 HTML DOM。
ReactDOM 提供了一個簡單的方法來將 React 元素呈現給 DOM,如下所示:ReactDOM.render(componentToRender, targetNode)
,其中第一個參數是要渲染的 React 元素或組件,第二個參數是組件將要渲染到的 DOM 節點。
如你所料,必須在 JSX 元素聲明之後調用 ReactDOM.render()
,就像在使用變量之前必須聲明它一樣。
--instructions--
代碼編輯器有一個簡單的 JSX 組件。 使用 ReactDOM.render()
方法將該組件渲染到頁面。 可以將定義好的 JSX 元素直接作爲第一個參數傳入,然後使用 document.getElementById()
來選擇要渲染到的 DOM 節點, 在這個挑戰中,請渲染到 id='challenge-node'
的 div
中。 確保沒有修改 JSX
常量。
--hints--
常量 JSX
應該返回一個 div
元素。
assert(JSX.type === 'div');
div
應該包含一個 h1
標籤作爲第一個元素。
assert(JSX.props.children[0].type === 'h1');
div
應該包含一個 p
標籤作爲第二個元素。
assert(JSX.props.children[1].type === 'p');
提供的 JSX 元素應該渲染到 id 爲 challenge-node
的 DOM 節點。
assert(
document.getElementById('challenge-node').childNodes[0].innerHTML ===
'<h1>Hello World</h1><p>Lets render this to the DOM</p>'
);
--seed--
--seed-contents--
const JSX = (
<div>
<h1>Hello World</h1>
<p>Lets render this to the DOM</p>
</div>
);
// Change code below this line
--solutions--
const JSX = (
<div>
<h1>Hello World</h1>
<p>Lets render this to the DOM</p>
</div>
);
// Change code below this line
ReactDOM.render(JSX, document.getElementById('challenge-node'));