简单的 React 组件问题答案

【问题标题】：simple React component issue简单的 React 组件问题
【发布时间】：2020-06-29 02:43:22
【问题描述】：

我在 html、css 和 JS 下面有 hte 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 已导入。

【问题讨论】：

查看reactjs.org/docs/components-and-props.html，有如下注释“React 将以小写字母开头的组件视为 DOM 标签”，因此为了使用您自己的组件，请始终以大写字母开头的组件名称。跨度>

标签： reactjs react-component

【解决方案1】：

尝试将hello 的第一个字母更改为Hello 之类的大写字母（仅该代码的错误似乎是一个缓存的东西，可能因为没有大写的jsx 元素而没有编译）你可以改为调用代码@ 987654323@作为备选

【讨论】：

是的，它确实奏效了...但是它在反应中如此固执己见吗..？顺便说一句..我刚开始反应..所以请原谅我的新手问题
@Programmerzzz React 假定每个以小写名称开头的组件都是一个 html 元素。
要调用没有 'H' 的组件，我们可以像圣地亚哥所说的那样使用 ` {hello('John',82)} {hello('Jane',89)}`。可能会发现它很有用。同样在这种情况下，我们可以将组件定义/签名更改为function hello(name,age)，类似于常规 JS 函数。