Freecodecamp: [测试版]了解自封式JSX标签

挑战名称

了解有关自动关闭JSX标签的信息

问题说明

删除了注释并关闭了标签（第一次尝试丢失br标签，然后失败了，然后修复了），然后尝试失败了，但随后该项目在页面上呈现。

失败原因来自：提供的JSX元素应按原样呈现给ID为Challenge-node的DOM节点。
收到此错误时，项目已在预览中呈现。
似乎不是用质询节点ID而是用根ID呈现它。

添加的代码： ReactDOM.render(JSX, document.getElementById('challenge-node'));
测试通过，现在它在预览中呈现两次。

挑战指出：

修复代码编辑器中的错误，以便它是有效的JSX并成功进行编译。 确保您没有更改任何内容-您只需要在需要的地方关闭标签即可。

它没有提到需要将其附加到DOM，似乎表明您只需要调整换行和水平线即可。

解决方案：
需要添加方向以渲染到DOM并删除当前预览。
或者需要将预览调整为不在质询节点上，而不是在根ID之外。
或者还有我目前无法想到的另一种解决方案。

您的密码

Failed:
const JSX = (
  <div>
    <h2>Welcome to React!</h2><br />
    <p>Be sure to close all tags!</p>
    <hr />
  </div>
);

Passed: 
const JSX = (
  <div>
    <h2>Welcome to React!</h2><br />
    <p>Be sure to close all tags!</p>
    <hr />
  </div>
);
ReactDOM.render(JSX, document.getElementById('challenge-node'));