首页 > 其他分享 >react之jsx基础(2)高频使用场景

react之jsx基础(2)高频使用场景

时间:2024-09-25 14:26:31浏览次数:9  
标签:function return 示例 JSX react props 组件 高频 jsx

在 React 中,JSX 的使用是非常广泛和高频的。以下是一些常见的高频使用场景及其示例,帮助你更好地理解 JSX 的实际应用:

1. 组件定义

JSX 最常见的用途之一是定义组件的结构。组件可以是函数组件或类组件,通常会使用 JSX 来描述组件的 UI。

函数组件示例:

function Greeting(props) {
  return Hello, {props.name}!;
}

类组件示例:

class Greeting extends React.Component {
  render() {
    return Hello, {this.props.name}!;
  }
}

2. 条件渲染

在 JSX 中,你可以使用 JavaScript 表达式来实现条件渲染。常用的方法是使用三元运算符或逻辑与运算符 (&&),根据条件渲染不同的 UI 元素。

三元运算符示例:

function Welcome(props) {
  return (
    <div>
      {props.isLoggedIn ? <UserProfile /> : <LoginButton />}
    </div>
  );
}

逻辑与运算符示例:

function Notifications(props) {
  return (
    <div>
      {props.unreadCount > 0 && <span>You have {props.unreadCount} unread messages.</span>}
    </div>
  );
}

3. 列表渲染

当需要渲染一个列表时,JSX 可以通过 map() 函数来生成一个数组的元素。每个元素通常需要一个唯一的 key 属性。

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

4. 事件处理

JSX 允许你在元素上设置事件处理器,如 onClickonChange 等。这些事件处理器通常会触发对应的 JavaScript 函数。

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

5. 嵌套组件

组件之间可以嵌套,从而创建复杂的 UI 结构。JSX 允许你轻松地将一个组件嵌套在另一个组件中。

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

6. 表单处理

在 JSX 中,你可以创建表单,并处理用户输入。React 通过受控组件(controlled components)来管理表单元素的状态。

受控组件示例:

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

7. 样式应用

JSX 允许你使用内联样式或类名来应用样式。内联样式是一个 JavaScript 对象,而类名则像在 HTML 中一样使用 className 属性。

内联样式示例:

function StyledComponent() {
  const style = { color: 'blue', fontSize: '20px' };

  return <div style={style}>This is a styled component</div>;
}

使用类名示例:

function StyledComponent() {
  return <div className="my-style">This is a styled component</div>;
}

8. 处理子组件

有时组件会接受子组件作为其内容,这称为 “插槽” 或 “children”。在 JSX 中,子组件可以被直接嵌入到父组件中。

function Layout(props) {
  return (
    <div className="layout">
      <header>Header</header>
      <main>{props.children}</main>
      <footer>Footer</footer>
    </div>
  );
}

// 使用 Layout 组件
function App() {
  return (
    <Layout>
      <p>This is the main content.</p>
    </Layout>
  );
}

这些是 JSX 的一些常见使用场景,通过掌握这些基本用法,你可以更高效地构建和管理 React 组件。

您好,我是肥晨。 欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

标签:function,return,示例,JSX,react,props,组件,高频,jsx
From: https://blog.51cto.com/u_15967048/12109040

相关文章

  • 如何通过Express和React处理SSE
    如何通过Express和React处理SSE奇舞团360最大的前端团队。已关注 2人赞同了该文章本文作者为360奇舞团前端开发工程师最近AIGC技术的大热,市面上也出现了许多类似生产的AI工具,其中有一大特色就是对话的输出结果是类似真人的打字效果出现,要呈现......
  • Server-Sent Events (SSE) Koa2 & Nginx & React 实践
    Server-SentEvents(SSE)Koa2&Nginx&React实践得鹿梦鱼前端+node全栈,骑马找马中,有兴趣可私聊​关注他 在现代Web应用中,实时数据传输变得越来越重要。Server-SentEvents(SSE)是一种轻量级的技术,允许服务器向客户端主动发送更新。本文将详细介......
  • (零) React Native 项目开发拾遗
    (零)ReactNative项目开发拾遗 一位离职的前端同事,最近接了个 ReactNative 的活儿,遇到许多搞不定的问题,于是找到我帮忙“补课”(没有系统的学习 ReactNative,也不具备原生 Android 和 iOS 开发基础知识)。此前带过另一位前端同事入门 ReactNative 开发,有段时间甚......
  • 在 Windows 机器内使用 Fast API、React、Raspberry Pi 制作服务器应用程序
    系统规格处理器-i5第13代RAM-16GBSSD-Nvme500GB操作系统-WindowsHomeRaspberryPi-Pi48GB我有一个托管的FastAPI应用程序在Windows机器上,同一台机器上还有一个React应用程序。React应用程序使用fastAPI应用......
  • react-基础
    React基础React介绍目标任务:了解什么是React以及它的特点React是什么一个专注于构建用户界面的JavaScript库,和vue和angular并称前端三大框架,不夸张的说,react引领了很多新思想,世界范围内是最流行的js前端框架,最近发布了18版本,加入了很多新特性React英文文档(https://reactjs.or......
  • ReactNative环境搭建
    一、ReactNative概述React是一个构建用户界面的JS框架,实现了数据的响应式和组件化开发,本身既可以用于Web网站项目,也可以用于创建移动端App项目。相较于Vue.js在移动端只能构建WebApp,React生态系统中有一个可以构建“真正原生App”的扩展——ReactNative,可以这样说:“ReactNativ......
  • React 入门第十天:代码拆分与懒加载
    在第十天的学习中,我把重点放在了React的代码拆分和懒加载技术上。这些技术不仅能有效减少应用的初始加载时间,还能提升用户体验。随着应用的功能逐渐增加,如何确保应用性能保持高效,成为了一个必须解决的问题。1.为什么需要代码拆分?在开发大型React应用时,所有的代码通常会被打包成一......
  • React 入门第九天:与后端API的集成与数据管理
    在React学习的第九天,我集中学习了如何与后端API进行集成。这一步是将静态的React应用转变为动态、可交互的关键。通过与后端通信,我们可以从服务器获取数据、发送用户输入以及处理复杂的业务逻辑。1.使用fetch进行数据请求React没有内置的HTTP库,因此我们通常使用浏览器提供的fetch......
  • SW1125 集成氮化镓的高频准谐振模式反激变换
    SW1125是一款集成650VGaN的针对离线式反激变换器的高性能高集成度准谐振电流模式PWM变换器。芯片集成有700V高压启动电路、线电压掉电检测和X电容放电功能。SW1125工作于带谷底锁定功能的谷底开启模式,同时集成频率抖动功能以优化EMI性能;当负载降低时,芯片从P......
  • React的useId,现在Vue3.5终于也有了!
    前言React在很早之前的版本中加了useId,用于生成唯一ID。在Vue3.5版本中,终于也有了期待已久的useId。这篇文章来带你搞清楚useId有哪些应用场景,以及他是如何实现的。关注公众号:【前端欧阳】,给自己一个进阶vue的机会useId的作用他的作用也是生成唯一ID,同一个Vue应用里面每次调用......