freeCodeCamp

2.6 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24bbe0dba28a8d3cbd4c5f	Render HTML Elements to the DOM	6	false		将HTML元素渲染到DOM

Description

到目前为止，您已经了解到JSX是一种在JavaScript中编写可读HTML的便捷工具。使用React，我们可以使用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节点。有一个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元素应该使用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>.");'

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

2.6 KiB Raw Blame History Unescape Escape