简单的 React 组件问题

Question

我有下面html、css和JS HTML:

<div id="app1"></div>

JS:

function hello(props){
  return(
  <div className="Person">
    <h1>Name: {props.name}</h1>
    <p>Age: {props.age}</p>
  </div>
  );
}

var app=(
<div>
  <hello name="John" age="82"/>
  <hello name="Jane" age="89"/>
</div>
);

ReactDOM.render(app,document.querySelector("#app1"));

CSS

.Person{
  width:200px;
  color:black;
  box-shadow:0 2px 2px #ccc;
  display:inline-block;
  margin:10px;
  padding:2px;
}

但此代码仅在组件名称为 Person 时有效，任何其他名称都会导致以下错误

Uncaught ReferenceError: Person is not defined 
 at pen.js:-5
Uncaught ReferenceError: Person is not defined 
 at pen.js:-4

您可以假设 Reactjs 和 ReactDOM 是导入的。

Answer 1

尝试将 hello 的第一个字母更改为 Hello 之类的国会大厦（只有该代码的错误似乎是缓存的东西可能没有编译，因为那里的 jsx 元素没有大写字母）你可以而是调用代码 {hello('john', 82)} 作为备选

简单的 React 组件问题

simple React component issue

reactjs

react-component