freeCodeCamp/curriculum/challenges/chinese/03-front-end-libraries/react/render-html-elements-to-the-dom.md

id, challengeType, forumTopicId, title

id	challengeType	forumTopicId	title
5a24bbe0dba28a8d3cbd4c5f	6	301406	渲染 HTML 元素为 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中。

Tests

tests:
  - text: 常量<code>JSX</code>应该返回一个<code>div</code>元素。
    testString: assert(JSX.type === 'div');
  - text: <code>div</code>应该包含一个<code>h1</code>标签作为第一个元素。
    testString: assert(JSX.props.children[0].type === 'h1');
  - text: <code>div</code>应该包含一个<code>p</code>标签作为第二个元素。
    testString: assert(JSX.props.children[1].type === 'p');
  - text: 提供的 JSX 元素应该渲染到 id 为<code>challenge-node</code>的 DOM 节点。
    testString: assert(document.getElementById('challenge-node').childNodes[0].innerHTML === '<h1>Hello World</h1><p>Lets render this to the DOM</p>');

Challenge Seed

const JSX = (
  <div>
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
  </div>
);
// change code below this line

Solution

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'));