当前位置：首页 > news >正文

React的组件学习

news 2025/7/30 12:03:46

React的组件学习

参考资料：https://zh-hans.react.dev/learn/your-first-component

一、定义组件

export default function Profile() {return (<imgsrc="https://i.imgur.com/MK3eW3Am.jpg"alt="Katherine Johnson"/>)
}

以下是构建组件的方法：

第一步：导出组件

export default 前缀是一种 JavaScript 标准语法（非 React 的特性）。它允许你标签一个文件中的主要函数以便你以后可以从其他文件引入它。欲了解更多关于导入的内容，请参阅组件的导入与导出章节！

第二步：定义函数

使用 function Profile() { } 定义名为 Profile 的 JavaScript 函数。

陷阱

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

第三步：添加标签

这个组件返回一个带有 src 和 alt 属性的 <img /> 标签。<img /> 写得像 HTML，但实际上是 JavaScript！这种语法被称为 JSX，它允许你在 JavaScript 中嵌入使用标签。

返回语句可以全写在一行上，如下面组件中所示：

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

但是，如果你的标签和 return 关键字不在同一行，则必须把它包裹在一对括号中，如下所示：

return (<div><img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /></div>
);

陷阱

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

二、使用组件

现在你已经定义了 Profile 组件，你可以在其他组件中使用它。例如，你可以导出一个内部使用了多个 Profile 组件的 Gallery 组件：

function Profile() {return (<imgsrc="https://i.imgur.com/MK3eW3As.jpg"alt="Katherine Johnson"/>);
}export default function Gallery() {return (<section><h1>了不起的科学家</h1><Profile /><Profile /><Profile /></section>);
}

浏览器所看到的

注意下面两者的区别：

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

然而 Profile 包含更多的 HTML：<img />。这是浏览器最后所看到的：

<section><h1>了不起的科学家</h1><img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /><img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /><img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>