构建交互式 React 组件

介绍

在这个项目中，你将学习如何使用 React 创建一个简单的显示/隐藏功能。你将实现一个按钮，用于切换页面上图像的可见性。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何使用 HTML、CSS 和 JavaScript 文件设置 React 项目
• 如何使用 useState 钩子来管理应用程序的状态
• 如何根据状态有条件地渲染组件
• 如何使用 CSS 对组件进行样式设置

🏆 成果

完成这个项目后，你将能够：

• 创建一个基本的 React 应用程序
• 实现状态管理以控制元素的可见性
• 在 React 项目中集成 HTML、CSS 和 JavaScript
• 理解使用 React 构建交互式用户界面的基础知识

设置项目

在这一步中，你将设置项目并熟悉提供的文件。

1. 打开右侧的编辑器。你可以在项目目录中看到以下文件：

├── style.css
├── index.html
├── script.js
└── dog.png

2. 点击右下角的“Go Live”，在端口 8080 上打开项目。

实现显示/隐藏功能

在这一步中，你将实现使用按钮来显示和隐藏图像的功能。

1. 打开 script.js 文件。
2. 创建 App 组件：

function App() {
  const [show, setShow] = React.useState(true);

  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      "button",
      { onClick: () => setShow(!show) },
      show ? "隐藏元素" : "显示元素"
    ),

    show && React.createElement("img", { src: "dog.png" })
  );
}

在这个组件中：

• 我们使用 useState 钩子创建一个状态变量 show 和一个用于更新它的函数 setShow。
• show 的初始值被设置为 true。
• 我们渲染一个按钮，点击时会切换 show 的值。
• 按钮文本根据 show 的值而变化。
• 我们使用 show 状态变量有条件地渲染图像。

3. 保存 App.js 文件。
4. 在浏览器中刷新页面。
5. 点击“隐藏元素”按钮来隐藏图像。
6. 点击“显示元素”按钮再次显示图像。

恭喜！你已经完成了“显示与隐藏”项目。你已经学会了如何使用 React 通过按钮创建一个简单的显示/隐藏功能。

总结

恭喜！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。