Javascript 组件未渲染

我正在我的Udemy上完成React 16课程。我们正在使用Codepen创建课程中的第一个React应用程序。虽然讲师能够在视频中渲染组件，但我遵循他的代码，它不会渲染。以下是HTML、CSS和JS代码：

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

HTML:

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

JavaScript:

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

function Person(){
  return(
    <div className="person">
      <h1>Your name</h1>
      <p1>Tristan</p1>
    </div>
  );
}

ReactDOM.render(<Person/>, document.querySelector('#p1'));

---

该问题是由于组件声明中的输入错误造成的。 应该是

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

function Person(){
 return(
  <div className="person">
   <h1>Your name</h1>
   <p1>Tristan</p1>
  </div>
 );
}

ReactDOM.render(<Person/>, document.querySelector('#p1'));

---

该问题是由于组件声明中的输入错误造成的。 应该是

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

function Person(){
 return(
  <div className="person">
   <h1>Your name</h1>
   <p1>Tristan</p1>
  </div>
 );
}

ReactDOM.render(<Person/>, document.querySelector('#p1'));

你有一个印刷错误：人对人

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

您还应该使用className，而不是class，因为JSX只是一个javascript，关键字类是保留的

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

此外，我认为您应该使用p或一些自定义组件来代替p1元素，这些组件的名称将以大写字母开头

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

职能人员{ 回来 你的名字 特里斯坦

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

; } ReactDOM.render，document.querySelector'p1'； .人{ 利润率：10px； 盒影：2个2个ccc； 边框：1px实心eee； 填充：20px； 宽度：200px； 显示：内联块； } 你有一个印刷错误：人对人

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

您还应该使用className，而不是class，因为JSX只是一个javascript，关键字类是保留的

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

此外，我认为您应该使用p或一些自定义组件来代替p1元素，这些组件的名称将以大写字母开头

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

职能人员{ 回来 你的名字 特里斯坦

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

; } ReactDOM.render，document.querySelector'p1'； .人{ 利润率：10px； 盒影：2个2个ccc； 边框：1px实心eee； 填充：20px； 宽度：200px； 显示：内联块； }

---

您有一个印刷错误：Persan vs PersonUpdate for person拼写错误，类更改为className。请在CodepenPublic solution上共享指向您的解决方案的公共链接公共解决方案：另请参阅下面的falinsky评论您有一个印刷错误：Persan vs PersonUpdate for person拼写错误，类更改为className。请共享指向您的解决方案的公共链接CodepenPublic解决方案：另请参见下面falinsky的评论您不允许在jsx中使用类作为道具。您不允许在jsx中使用类作为道具。谢谢！在这两次更改之后，它仍然无法渲染。@Tristanewman还用有关使用非标准元素p1No的信息更新了我的解决方案。只是它没有渲染。@Tristanewman，所以请在上共享指向您的解决方案的公共链接Codepen@TristanNewman问题在于，您在加载包含React本身的脚本之前加载了包含ReactDOM的脚本。请参阅此处的工作示例：这样您就可以更改您在关于CodepenThanks的JS部分中启用的脚本的顺序！在这两次更改之后，它仍然无法渲染。@Tristanewman还用有关使用非标准元素p1No的信息更新了我的解决方案。只是它没有渲染。@Tristanewman，所以请在上共享指向您的解决方案的公共链接Codepen@TristanNewman问题在于，您在加载包含React本身的脚本之前加载了包含ReactDOM的脚本。请参阅此处的工作示例：这样您就可以更改在Codepen的JS部分中启用的脚本的顺序