4.jsx语法（下）

最新推荐文章于 2025-09-12 14:39:04 发布

普通的go学习者

最新推荐文章于 2025-09-12 14:39:04 发布

阅读量556

点赞数 8

CC 4.0 BY-SA版权

分类专栏： React从0开始到搭建后台管理系统文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/ztllearn/article/details/151227607

React从0开始到搭建后台管理系统专栏收录该内容

4 篇文章

订阅专栏

通过前面的学习我们已经初步认知了jsx的部分语法，今天我们详细学习一下

1.使用驼峰式命名法给大部分属性命名

function App() {


  return (
    <>
      <div className="box" ></div>
    </>
  )
}

例如class在jsx中要写成className

下面是常见属性对比：

HTML 属性	JSX 写法（驼峰式）
`class`	`className`
`for`	`htmlFor`
`tabindex`	`tabIndex`
`maxlength`	`maxLength`
`onclick`	`onClick`
`onchange`	`onChange`
`readonly`	`readOnly`
`autoplay`	`autoPlay`
`contenteditable`	`contentEditable`

2.JSX 与表达式 vs 语句

`{}` 里能放表达式，不能放语句

// ✅ 表达式
{1 + 2}
{user.name}
{isLogin ? "已登录" : "未登录"}

// ❌ 语句（不能写）
{if (isLogin) { return "已登录"; }}
{for (let i=0; i<10; i++) {}}

如果要写语句，需要用函数或逻辑包装：

{(() => {
  if (isLogin) return "已登录";
  return "未登录";
})()}

3.条件渲染

三元运算符

// 三元运算符
{isLogin ? <p>欢迎回来</p> : <p>请登录</p>}

函数逻辑

例如：

方式 1：在渲染之前用普通 `if/else`

先在函数里用 if 计算出一个变量，再放到 JSX 里：

function App() {
  const isLogin = true;
  let content;

  if (isLogin) {
    content = <p>欢迎回来</p>;
  } else {
    content = <p>请登录</p>;
  }

  return (
    <>
      <h1>用户状态</h1>
      {content}
    </>
  );
}

方式 2：立即执行函数（IIFE）

function App() {


  return (
    <>


      {/* 使用 IIFE 做条件渲染 */}
      {(() => {
        if (isLogin) {
          return <p>欢迎回来</p>;
        } else {
          return <p>请登录</p>;
        }
      })()}


    </>
  );
}

4.列表渲染

在 React 里，一般用数组的 `map` 方法来做循环渲染

function App() {
  const fruits = ["苹果", "香蕉", "橙子"];

  return (
    <ul>
      {fruits.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default App;

fruits.map(...)：循环数组
每次返回一个 <li> 元素
必须加 key 属性（React 用它来高效对比和更新 DOM），以避免渲染性能问题

5.组件渲染

例如:

function Welcome(props) {
  return <h2>你好, {props.name}</h2>;
}

function App() {
  return (
    <div>
      <Welcome name="天哥" />
      <Welcome name="小明" />
    </div>
  );
}