Question

我正在学习有关Udemy的React 16课程。我们正在使用Codepen在课程中创建我们的第一个React应用程序。尽管讲师可以渲染视频中的组件，但我遵循他的代码，但无法渲染。这是HTML，CSS和JS代码：

HTML：

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

CSS：

.person {
  margin:10px;
  box-shadow:2px 2px #ccc;
  border: 1px solid #eee;
  padding: 20px;
  width: 200px;
  display: inline-block;
}

JavaScript：

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

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

Answer 1

您打印有误：Persan与Person。

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

我相信您也应该使用p1或某些自定义组件，而不是p元素，这些组件的名称应以大写字母开头。

function Person() {
  return (
    <div className="person">
      <h1>Your name</h1>
      <p>Tristan</p>
    </div>
  );
}

ReactDOM.render(<Person/>, document.querySelector('#p1'));

.person{
  margin:10px;
  box-shadow:2px 2px #ccc;
  border: 1px solid #eee;
  padding: 20px;
  width: 200px;
  display: inline-block;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="p1"></div>

Answer 2

该问题归因于组件声明中的错字Persan。应该是

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

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

组件未呈现

2 个答案: