首页 › React › React 基础

JSX 规则

JSX 是 JavaScript 的语法扩展，看起来像 HTML。

// 1. 单根元素
return (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
)
// 或使用 Fragment
return (
  <>
    <h1>Title</h1>
    <p>Content</p>
  </>
)

// 2. className 替代 class
<div className="container">

// 3. {} 插入 JavaScript 表达式
const name = "React"
<h1>Hello, {name.toUpperCase()}</h1>

// 4. 注释
{/* 这是注释 */}

函数组件

// 基础组件
function Greeting() {
  return <h1>Hello React</h1>
}

// TypeScript 组件
interface UserCardProps {
  name: string
  age: number
}

function UserCard({ name, age }: UserCardProps) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  )
}

组件组合

// children 属性
interface CardProps {
  title: string
  children: React.ReactNode
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <div className="card-header">{title}</div>
      <div className="card-body">{children}</div>
    </div>
  )
}

// 使用
function App() {
  return (
    <Card title="用户信息">
      <p>姓名：张三</p>
      <p>邮箱：zhang@example.com</p>
    </Card>
  )
}

组件拆分

// 大型组件拆分为小组件
function Dashboard() {
  return (
    <div>
      <Header />
      <Sidebar />
      <MainContent>
        <StatsCard title="用户数" value={1234} />
        <StatsCard title="订单数" value={567} />
      </MainContent>
    </div>
  )
}

JSX vs createElement

// JSX 语法（推荐）
const element = <h1 className="greeting">Hello</h1>

// 编译后
const element = React.createElement('h1', { className: 'greeting' }, 'Hello')

小结

• JSX 规则：单根元素、className、{} 表达式。
• 函数组件接收 Props 参数，返回 JSX。
• 组件通过 children 组合嵌套。
• 大型 UI 应拆分为小组件，每个组件单一职责。
• JSX 是 React.createElement 的语法糖。

上一节：React 概述与开发环境 下一节：Props 与事件处理

贡献者: 布欧-Lewyon