构建交互式 React 组件

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

项目预览

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

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

设置项目

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

  1. 打开右侧的编辑器。你可以在项目目录中看到以下文件:
├── style.css
├── index.html
├── script.js
└── dog.png
  1. 点击右下角的“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 状态变量有条件地渲染图像。
  1. 保存 App.js 文件。
  2. 在浏览器中刷新页面。
  3. 点击“隐藏元素”按钮来隐藏图像。
  4. 点击“显示元素”按钮再次显示图像。
项目预览

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

✨ 查看解决方案并练习

总结

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

您可能感兴趣的其他 JavaScript 教程