React: 函数组件与 Props

// 页面 A：红色按钮
<button style={{ backgroundColor: 'red', color: 'white' }}>
  删除
</button>

// 页面 B：蓝色按钮
<button style={{ backgroundColor: 'blue', color: 'white' }}>
  提交
</button>

// 页面 C：灰色小按钮
<button style={{ backgroundColor: 'gray', color: 'black', fontSize: '12px' }}>
  取消
</button>

function Button({ variant = 'primary', size = 'medium', children }) {
  const styles = {
    primary: { backgroundColor: '#1890ff', color: 'white' },
    danger:  { backgroundColor: '#ff4d4f', color: 'white' },
    default: { backgroundColor: '#f0f0f0', color: '#333' }
  }

  return (
    <button style={{
      ...styles[variant],
      padding: size === 'large' ? '12px 24px' : '8px 16px',
      border: 'none',
      borderRadius: '6px',
      cursor: 'pointer'
    }}>
      {children}
    </button>
  )
}

// 使用：一行代码搞定
<Button variant="danger">删除</Button>
<Button variant="primary">提交</Button>
<Button variant="default">取消</Button>

// 最简单的函数组件
function Welcome() {
  return <h1>Hello, React!</h1>
}

// 箭头函数写法（更常见）
const Welcome = () => {
  return <h1>Hello, React!</h1>
}

// 隐式返回（只有一行 JSX 时可以省略 return）
const Welcome = () => <h1>Hello, React!</h1>

// ---- 定义组件 ----
function Greeting(props) {
  // props 是一个对象，包含所有传入的参数
  return <h1>你好，{props.name}！你今年 {props.age} 岁了。</h1>
}

// ---- 使用组件 ----
<Greeting name="Alice" age={28} />

// 渲染结果：
// <h1>你好，Alice！你今年 28 岁了。</h1>

// 解构写法（推荐）
function Greeting({ name, age }) {
  return <h1>你好，{name}！你今年 {age} 岁了。</h1>
}

// 相当于：
function Greeting(props) {
  const { name, age } = props
  return <h1>你好，{name}！你今年 {age} 岁了。</h1>
}

function UserCard({ name, role }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>角色：{role}</p>
    </div>
  )
}

// 字符串用双引号，其他类型用 {} 包裹
<UserCard name="Alice" role="管理员" />

function Product({ name, price, inStock, details }) {
  return (
    <div className="product">
      <h3>{name}</h3>
      <p>价格：${price}</p>
      {/* 布尔值用于条件渲染 */}
      {inStock ? <span>有货 ✅</span> : <span>缺货 ❌</span>}
      {/* 对象：可以访问属性 */}
      <p>类别：{details.category} | 重量：{details.weight}g</p>
    </div>
  )
}

// 使用组件
<Product
  name="无线鼠标"
  price={89}
  inStock={true}
  details={{ category: '外设', weight: 120 }}
/>

// ============================================
// 示例：用 Props 构建一个用户信息卡片
// 功能：展示 Props 的多种类型传递
// ============================================

function UserCard({ name, age, isOnline, avatar, tags }) {
  return (
    <div style={{
      border: '1px solid #ddd',
      borderRadius: '8px',
      padding: '20px',
      maxWidth: '300px'
    }}>
      <img
        src={avatar}
        alt={name}
        style={{ width: '80px', height: '80px', borderRadius: '50%' }}
      />
      <h2>{name}</h2>
      <p>年龄：{age} 岁</p>
      <p>
        状态：
        <span style={{ color: isOnline ? '#52c41a' : '#999' }}>
          {isOnline ? '在线' : '离线'}
        </span>
      </p>
      <div>
        标签：
        {tags.map(tag => (
          <span key={tag} style={{
            background: '#f0f0f0',
            padding: '2px 8px',
            borderRadius: '4px',
            margin: '0 4px',
            fontSize: '12px'
          }}>
            {tag}
          </span>
        ))}
      </div>
    </div>
  )
}

// 使用组件
<UserCard
  name="Alice"
  age={28}
  isOnline={true}
  avatar="https://i.pravatar.cc/80"
  tags={['前端', 'React', 'TypeScript']}
/>

// 定义：用 children 接收标签间的内容
function Card({ children, title }) {
  return (
    <div style={{ border: '1px solid #ddd', padding: '16px', borderRadius: '8px' }}>
      <h3>{title}</h3>
      <div>{children}</div>  {/* 标签之间的内容在这里显示 */}
    </div>
  )
}

// 使用：标签之间的内容自动成为 children
<Card title="公告">
  <p>系统将于今晚 22:00 进行维护，预计持续 2 小时。</p>
  <p>请提前保存您的工作，以免数据丢失。</p>
</Card>

// 渲染结果：
// <div class="card">
//   <h3>公告</h3>
//   <div>
//     <p>系统将于今晚 22:00 进行维护...</p>
//     <p>请提前保存您的工作...</p>
//   </div>
// </div>

function Button({ text = '点击', color = 'blue', size = 'medium' }) {
  return (
    <button style={{
      backgroundColor: color,
      padding: size === 'large' ? '12px 24px' : '8px 16px',
      color: 'white',
      border: 'none',
      borderRadius: '4px'
    }}>
      {text}
    </button>
  )
}

// 不传参 → 使用默认值
<Button />                    // 蓝色、medium、"点击"

// 传部分参数 → 覆盖默认值
<Button text="提交" />        // 蓝色、medium、"提交"
<Button color="red" size="large" />  // 红色、large、"点击"

// ---- 定义 Props 类型 ----
interface ButtonProps {
  text: string           // 必填：string
  color?: string         // 选填：加 ? 号
  size?: 'small' | 'medium' | 'large'  // 选填：限制为三个值之一
  onClick: () => void    // 必填：函数类型
  disabled?: boolean     // 选填：布尔值，默认为 false
}

// ---- 在组件中使用 ----
function Button({ text, color = 'blue', size = 'medium', onClick, disabled = false }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        backgroundColor: color,
        padding: size === 'large' ? '12px 24px' : '8px 16px',
        opacity: disabled ? 0.5 : 1,
        color: 'white',
        border: 'none',
        borderRadius: '4px'
      }}
    >
      {text}
    </button>
  )
}

// 使用：编辑器会智能提示
<Button
  text="保存"
  color="#1890ff"
  size="medium"
  onClick={() => alert('保存成功！')}
/>

// ❌ 错误：TypeScript 会报错
<Button text="测试" />  // 缺少必填的 onClick
<Button text="测试" size="xl" onClick={fn} />  // size 不在允许的范围内

// ============================================
// 示例：商品卡片组件（综合运用 Props 各种类型）
// ============================================

// 类型定义
interface Product {
  id: number
  name: string
  price: number
  image: string
  category: string
  tags: string[]
}

interface ProductCardProps {
  product: Product
  onAddToCart: (productId: number) => void
  showDiscount?: boolean
  size?: 'small' | 'large'
}

// 组件实现
function ProductCard({
  product,
  onAddToCart,
  showDiscount = false,
  size = 'large'
}: ProductCardProps) {
  return (
    <div style={{
      border: '1px solid #eee',
      borderRadius: '8px',
      padding: size === 'large' ? '16px' : '10px',
      width: size === 'large' ? '280px' : '200px'
    }}>
      <img
        src={product.image}
        alt={product.name}
        style={{ width: '100%', height: '150px', objectFit: 'cover' }}
      />
      <h3>{product.name}</h3>
      <p style={{ color: '#ff4d4f', fontSize: '20px', fontWeight: 'bold' }}>
        ${product.price}
        {showDiscount && <span style={{ fontSize: '12px', color: '#999', textDecoration: 'line-through', marginLeft: '8px' }}>${(product.price * 1.2).toFixed(0)}</span>}
      </p>
      <p style={{ color: '#666', fontSize: '14px' }}>{product.category}</p>
      <div>
        {product.tags.map(tag => (
          <span key={tag} style={{ background: '#f0f5ff', color: '#1890ff', padding: '2px 6px', borderRadius: '4px', margin: '0 2px', fontSize: '12px' }}>
            {tag}
          </span>
        ))}
      </div>
      <button
        onClick={() => onAddToCart(product.id)}
        style={{
          width: '100%',
          padding: '8px',
          marginTop: '10px',
          backgroundColor: '#1890ff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        加入购物车
      </button>
    </div>
  )
}

// 使用组件
const myProduct = {
  id: 101,
  name: '机械键盘',
  price: 299,
  image: 'https://via.placeholder.com/280x150',
  category: '电脑外设',
  tags: ['热卖', '新品']
}

<ProductCard
  product={myProduct}
  onAddToCart={(id) => console.log('加入购物车：', id)}
  showDiscount={true}
/>

// ============================================
// 示例：个人资料卡片——Props 类型与默认值综合运用
// 功能：展示 string、number、boolean、object、function 等 Props 类型的传递
// ============================================

function ProfileCard({
  name = '匿名用户',
  age = 0,
  isActive = false,
  avatar = 'https://via.placeholder.com/60',
  skills = [],
  onGreet
}) {
  return (
    <div style={{
      border: '1px solid #e8e8e8',
      borderRadius: '12px',
      padding: '20px',
      maxWidth: '320px',
      boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '16px' }}>
        <img
          src={avatar}
          alt={name}
          style={{ width: '60px', height: '60px', borderRadius: '50%', objectFit: 'cover' }}
        />
        <div>
          <h3 style={{ margin: 0 }}>{name}</h3>
          <p style={{ margin: '4px 0 0 0', color: '#666', fontSize: '14px' }}>
            {age} 岁 · {isActive ? '🟢 在线' : '🔴 离线'}
          </p>
        </div>
      </div>

      {skills.length > 0 && (
        <div style={{ marginBottom: '12px' }}>
          <p style={{ margin: '0 0 8px 0', fontWeight: 'bold', fontSize: '14px' }}>技能：</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
            {skills.map((skill, index) => (
              <span key={index} style={{
                backgroundColor: '#f0f5ff',
                color: '#1890ff',
                padding: '4px 10px',
                borderRadius: '12px',
                fontSize: '12px'
              }}>
                {skill}
              </span>
            ))}
          </div>
        </div>
      )}

      {onGreet && (
        <button
          onClick={() => onGreet(name)}
          style={{
            width: '100%',
            padding: '8px',
            backgroundColor: '#1890ff',
            color: 'white',
            border: 'none',
            borderRadius: '6px',
            cursor: 'pointer',
            fontSize: '14px'
          }}
        >
          向 {name} 打招呼
        </button>
      )}
    </div>
  )
}

// 使用：全部传参
<ProfileCard
  name="Alice"
  age={28}
  isActive={true}
  avatar="https://i.pravatar.cc/60"
  skills={['React', 'TypeScript', 'Node.js']}
  onGreet={(name) => alert(`你好，${name}！`)}
/>

// 使用：只传部分参数（其余使用默认值）
<ProfileCard
  name="Bob"
  skills={['Vue', 'Python']}
/>

// 使用：不传任何参数（全部使用默认值）
<ProfileCard />

function AddToCartButton({ productName, onAdd }) {
  const [adding, setAdding] = useState(false)

  async function handleClick() {
    setAdding(true)
    await onAdd(productName)
    setAdding(false)
  }

  return (
    <button onClick={handleClick} disabled={adding}
      style={{ padding: '8px 16px', cursor: adding ? 'wait' : 'pointer' }}>
      {adding ? 'Adding...' : `Add ${productName}`}
    </button>
  )
}

function ProductPage() {
  const [cart, setCart] = useState([])

  function handleAdd(name) {
    setCart(prev => [...prev, name])
  }

  return (
    <div>
      <h2>Products</h2>
      <AddToCartButton productName="Keyboard" onAdd={handleAdd} />
      <AddToCartButton productName="Mouse" onAdd={handleAdd} />
      <p>Cart: {cart.join(', ') || 'empty'}</p>
    </div>
  )
}

function StatusMessage({ status }) {
  const config = {
    loading: { icon: '⏳', color: '#1890ff', text: 'Loading...' },
    success: { icon: '✅', color: '#52c41a', text: 'Success!' },
    error:   { icon: '❌', color: '#ff4d4f', text: 'Error occurred' },
    empty:   { icon: '📭', color: '#999', text: 'No data' },
  }
  const { icon, color, text } = config[status] || config.empty

  return (
    <div style={{ padding: 16, textAlign: 'center', color }}>
      <span style={{ fontSize: 32 }}>{icon}</span>
      <p>{text}</p>
    </div>
  )
}

function DataViewer() {
  const [status, setStatus] = useState('loading')
  return (
    <div style={{ maxWidth: 300, margin: '0 auto' }}>
      <StatusMessage status={status} />
      <div style={{ display: 'flex', gap: 4 }}>
        {['loading', 'success', 'error', 'empty'].map(s => (
          <button key={s} onClick={() => setStatus(s)}
            style={{ padding: '4px 8px', cursor: 'pointer', fontSize: 12 }}>
            {s}
          </button>
        ))}
      </div>
    </div>
  )
}

function DataList({ items, renderItem, keyExtractor, emptyMessage = 'No items' }) {
  if (!items || items.length === 0) {
    return <p style={{ color: '#999', textAlign: 'center', padding: 20 }}>{emptyMessage}</p>
  }

  return (
    <ul style={{ listStyle: 'none', padding: 0 }}>
      {items.map(item => (
        <li key={keyExtractor(item)} style={{ borderBottom: '1px solid #f0f0f0', padding: 8 }}>
          {renderItem(item)}
        </li>
      ))}
    </ul>
  )
}

function App() {
  const users = [
    { id: 1, name: 'Alice', email: 'alice@example.com', active: true },
    { id: 2, name: 'Bob', email: 'bob@example.com', active: false },
    { id: 3, name: 'Charlie', email: 'charlie@example.com', active: true },
  ]

  const products = [
    { id: 'a', name: 'Keyboard', price: 79 },
    { id: 'b', name: 'Monitor', price: 399 },
  ]

  return (
    <div style={{ maxWidth: 400, margin: '0 auto' }}>
      <h3>Users</h3>
      <DataList
        items={users}
        keyExtractor={u => u.id}
        renderItem={u => (
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>{u.name} ({u.email})</span>
            <span style={{ color: u.active ? '#52c41a' : '#999' }}>
              {u.active ? 'Active' : 'Inactive'}
            </span>
          </div>
        )}
      />
      <h3>Products</h3>
      <DataList
        items={products}
        keyExtractor={p => p.id}
        emptyMessage="No products available"
        renderItem={p => (
          <span>{p.name} - ${p.price}</span>
        )}
      />
    </div>
  )
}