javascript - 组件未呈现

Question

我正在 Udemy 上学习 React 16 类(class)。我们正在使用 Codepen 在类(class)中创建我们的第一个 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 vs Person。

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

此外，我认为您应该使用 p 或一些名称以大写字母开头的自定义组件，而不是 p1 元素。

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>