📅 GJ504b 的 React 进阶之路：Day 3

目录

📅 GJ504b 的 React 进阶之路：Day 3

学习组件如何“拿来”
从pnpm add antd开始,基于antd的代码增加功能学习使用第三方组件
alt text

import React from 'react';

import { Flex, Space, Table, Tag } from 'antd';
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <>
      {text.includes('Jim')&&<Tag color="error">重点关注</Tag>}
      {/* a && b:a成立就渲染b */}
      {<a>{text}</a>}
    </>,
    filters:[
      {
      text:'姓 J 的',value:'J'
    },
      {
      text:'姓 K 的',value:'K'
    },
  ],
  onFilter:(value,record) =>record.name.startsWith(value),
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    // render:text =><span style={{color:text>40? 'red':''}}>{text +"岁"}</span>
    render:text =><span style={text>40?{color:'red'}:undefined}>{text +"岁"}</span>,//这个更好，先执行判断再决定要不要绑定css
    sorter:(a,b) =>a.age - b.age
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    filters:[
      {text:'纽约',value:'New York'},
      {text:'伦敦',value:'London'},
      
    ],
    onFilter:(value,record) =>record.address.startsWith(value),
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <Flex gap="small" align="center" wrap>
        {tags.map(tag => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })},

      </Flex>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
        <a onClick={()=>console.log(`你好，来自${record.address}的${record.name}!`)}>greet</a>
      </Space>
    ),
  },
];
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '4',
    name: 'Ken Black',
    age: 49,
    address: '  No. 5 Lake Park',
    tags: ['joker', 'teacher'],
  },
];
const App = () => <Table columns={columns} dataSource={data} />;
export default App;

1 学习Table

Table 组件的本质是规则与数据的解耦。

  • dataSource：后端给你的原始数据（数组对象），是表格的“血肉”。
  • columns：你定义的展示规则（配置数组），是表格的“骨架”。

2 columns 列配置的三剑客

每一列配置通常包含以下基础属性：

  • title：表头显示的名称（如：姓名、年龄）。
  • dataIndex：对应dataSource中的字段名，连接数据与单元格。
  • key：React 渲染性能优化用的唯一标识，通常与 dataIndex 保持一致。

3 进阶技巧：自定义渲染 (render)

这是 Table 最强大的地方，让你能跳出纯文字的限制。

语法 GJ504b的实战案例 核心要点
基础渲染 render: text => <a>{text}</a> 处理当前单元格的值。
条件渲染 (&&) {text.includes('Jim') && <Tag>重点关注</Tag>} 利用短路逻辑，条件成立才显示组件。
多数据联动 render: (_, record) => <span>{record.name}</span> 利用第二个参数 record 获取整行数据。
样式优化 style={text > 40 ? {color:'red'} : undefined} 性能金句：用 undefined 代替空字符串，减少无效 CSS 计算。

4 交互升级：排序与筛选

让表格从“死”变“活”的关键配置

排序 (sorter)：

  • 写法：sorter: (a, b) => a.age - b.age。
  • 原理：定义两个数值的对比规则，Antd 会自动处理升降序切换。
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    // render:text =><span style={{color:text>40? 'red':''}}>{text +"岁"}</span>
    render:text =><span style={text>40?{color:'red'}:undefined}>{text +"岁"}</span>,
//这个更好，先执行判断再决定要不要绑定css
    sorter:(a,b) =>a.age - b.age
  },

alt text

筛选 (filters 和 onFilter)：

  • filters：定义下拉菜单的选项（包含 text 和 value）。
  • onFilter：核心过滤函数。注意拼写：是 startsWith（带 s）。
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    filters:[
      {text:'纽约',value:'New York'},
      {text:'伦敦',value:'London'},
      
    ],//添加筛选项
    onFilter:(value,record) =>record.address.startsWith(value),//筛选逻辑的绑定
  },

alt text
alt text

5 ES6 语法加油站

在写 Antd 代码时，这些语法能让代码更优雅：

  • 模板字符串：使用反引号 `` 配合 ${} 拼接变量，告别繁琐的加号。
`你好，来自 ${record.address} 的 ${record.name}`
  • 箭头函数：极简的函数写法，如果逻辑只有一行且是返回值，可以省略 { return }。
  • 对象缩写与逗号：对象属性间必须用逗号隔开，特别是把 sorter 挪到 render 后面时，千万别漏了 render 结尾的逗号。

复习昨日力扣

/**
 * @param {string[]} strs
 * @return {string[][]}
 */
var groupAnagrams = function(strs) {
    const n = strs.length;
    const map = new Map();
    for(let i = 0; i< n;i ++){
        let arr = Array.from(strs[i]);
        //['a,'e','t']        
        let key = arr.sort().toString();
        //['aet']
        let list = map.get(key) ? map.get(key) : new Array();
        //开辟数组list空间
        list.push(strs[i])
        //把值放入list数组里
        map.set(key,list)
        //规定map哈希表里的键（key）和值（list数组）
    }
    return Array.from(map.values())
    //最后遍历完后返回哈希表 的值
};



/**
 * @param {string[]} strs
 * @return {string[][]}
 */
var groupAnagrams = function(strs) {
    const map = new Map();
    for(let str of strs){
        let arr = Array.from(str);
        let key = arr.sort().toString();
        let list = map.get(key)?map.get(key):new Array();
        list.push(str);
        map.set(key,list);
    }
    return Array.from(map.values())
};
/*
遍历数组时，避免用 for...in，优先使用for...of或普通 for 循环，防止拿到索引而非元素。
Map的has()用于判断存在性，get()用于获取值，二者不能混用。*/

新题

alt text
没有用哈希表，自己尝试写，时间复杂度O(nlog(n))
错误：

  1. 处理重复元素出错，想明白是跳过还是不做处理
  2. count设置时候初始值？以及空数组处理未添加
  3. Array的sort方法是按Unicode排序的，如果要强制按大小排序要：
    Array.sort((a,b)=>a-b)
/**
 * @param {number[]} nums
 * @return {number}
 */
var longestConsecutive = function (nums) {
    // nums.sort();//按照Unicode排序，以开头优先
    nums.sort((a, b) => a - b)//强制升序排列
    // cosnt map = new Map();
    const n = nums.length;
    if(n ===0)return 0;
    let max = 1;
    let count = 1;
    for (let i = 0; i < n - 1; i++) {
        if (nums[i] === nums[i + 1]) {
            
        } else {
            if (nums[i] + 1 === nums[i + 1]) {
                count++;
                max = Math.max(max, count);
            } else {
                
                count = 1;
            }
        }
    }
    return max;
};
posted @ 2026-02-03 21:47  GJ504b  阅读(0)  评论(0)    收藏  举报