3.3 KiB
3.3 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24bbe0dba28a8d3cbd4c5f | Render HTML Elements to the DOM | 6 | false | تقديم عناصر HTML إلى DOM |
Description
ReactDOM.render(componentToRender, targetNode)
DOM التي تبدو كما يلي: ReactDOM.render(componentToRender, targetNode)
، حيث تكون الوسيطة الأولى هي عنصر React أو المكون الذي تريد ReactDOM.render(componentToRender, targetNode)
الثانية هي عقدة 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