跳到主要内容

描述用户界面

描述用户界面

React 组件本质上是可以任意添加标签的 JavaScript 函数

React 组件是常规的 JavaScript 函数,但 组件的名称必须以大写字母开头,否则它们将无法运行!

没有括号包裹的话,任何在 return 下一行的代码都 将被忽略

浏览器所看到的

注意下面两者的区别:

  • <section> 是小写的,所以 React 知道我们指的是 HTML 标签。
  • <Profile /> 以大写 P 开头,所以 React 知道我们想要使用名为 Profile 的组件。

嵌套和组织组件

组件可以渲染其他组件,但是 请不要嵌套他们的定义

export default function Gallery() {
// 🔴 永远不要在组件中定义组件
function Profile() {
// ...
}
// ...
}

应该在顶层定义每个组件

export default function Gallery() {
// ...
}

// ✅ 在顶层声明组件
function Profile() {
// ...
}