时间戳

首页 > 解决方案 > 简单的 React 组件问题

reactjs - 简单的 React 组件问题

问题描述

我在 html、css 和 JS HTML 下面有 hte：

<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导入。

标签： reactjsreact-component

解决方案

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

推荐阅读