63 lines
2.6 KiB
Markdown
63 lines
2.6 KiB
Markdown
|
---
|
|||
|
|
id: 5a24bbe0dba28a8d3cbd4c5f
|
|||
|
|
title: Render HTML Elements to the DOM
|
|||
|
|
challengeType: 6
|
|||
|
|
isRequired: false
|
|||
|
|
videoUrl: ''
|
|||
|
|
localeTitle: 将HTML元素渲染到DOM
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Description
|
|||
|
|
<section id="description">到目前为止，您已经了解到JSX是一种在JavaScript中编写可读HTML的便捷工具。使用React，我们可以使用React的渲染API（称为ReactDOM）将此JSX直接渲染到HTML DOM。 ReactDOM提供了一种简单的方法来将React元素呈现给DOM，如下所示： <code>ReactDOM.render(componentToRender, targetNode)</code> ，其中第一个参数是要呈现的React元素或组件，第二个参数是DOM节点您想要将组件渲染到。正如您所料，必须在JSX元素声明之后调用<code>ReactDOM.render()</code> ，就像在使用它们之前必须声明变量一样。 </section>
|
|||
|
|
|
|||
|
|
## Instructions
|
|||
|
|
<section id="instructions">代码编辑器有一个简单的JSX组件。使用<code>ReactDOM.render()</code>方法将此组件呈现给页面。您可以直接将定义的JSX元素作为第一个参数传递，并使用<code>document.getElementById()</code>来选择要将其渲染到的DOM节点。有一个<code>div</code> ， <code>id='challenge-node'</code>可供您使用。确保不要更改<code>JSX</code>常量。 </section>
|
|||
|
|
|
|||
|
|
## Tests
|
|||
|
|
<section id='tests'>
|
|||
|
|
|
|||
|
|
```yml
|
|||
|
|
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元素应该使用id <code>challenge-node</code>呈现给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>.");'
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Challenge Seed
|
|||
|
|
<section id='challengeSeed'>
|
|||
|
|
|
|||
|
|
<div id='jsx-seed'>
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
const JSX = (
|
|||
|
|
<div>
|
|||
|
|
<h1>Hello World</h1>
|
|||
|
|
<p>Lets render this to the DOM</p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
// change code below this line
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Solution
|
|||
|
|
<section id='solution'>
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// solution required
|
|||
|
|
```
|
|||
|
|
</section>
|