小土坡的博客

在此记录下Linux 中的 tree 命令笔记。 指定输出目录层级 -L我们可以用 -L 加数字的方式指定 tree 命令只输出指定深度的文件夹。 1tree -L 2 只输出2层文件夹的内容。 忽略指定文件夹1tree -I 'node_modules|target|build' 我们可以用 | 来指定多个要忽略的文件夹。

添加和删除1234567891011121314151617181920212223242526272829303132333435363738394041import { useState } from "react";interface ArtistsProps { id: number; name: string;}function StateArray() { const [name, setName] = useState(""); const [artists, setArtists] = useState<ArtistsProps[]>([]); return ( <> <h1>振奋人心的雕塑家们：</h1> <input value={name} onChange={(e) => setName(e.target.value)} />...

Divider 分隔线组件提供了一条细的、不显眼的线，用于对元素进行分组以加强视觉层次。 下面来看看 Mui 官网给的 Demo 吧。 12345678910111213141516171819202122232425262728293031323334353637import { List, ListItem, ListItemText, Divider } from "@mui/material";import { SxProps } from "@mui/system";const style: SxProps = { py: 0, width: "100%", maxWidth: 360, borderRadius: 2, border: "1px solid", borderColor: "divider", backgroundColor:...

1234567891011121314151617181920212223242526272829303132import * as React from 'react';import TextField from '@mui/material/TextField';import Autocomplete from '@mui/material/Autocomplete';const options = ['Option 1', 'Option 2'];export default function ControllableStates() { const [value, setValue] = React.useState<string | null>(options[0]); const [inputValue, setInputValue] = React.useState('');/ return ( ...

disableCloseOnSelectdisableCloseOnSelect 属性可以控制我们在点击列表项后，是否自动关闭下拉列表。默认值为：false (点击后会自动关闭) 1234567891011121314<Stack spacing={1} sx={{ width: 300 }}> <Autocomplete {...defaultProps} id="disable-close-on-select" disableCloseOnSelect={false} renderInput={(params) => ( <TextField {...params} label="disableCloseOnSelect" ...

MUI disablePortal 属性的作用在 MUI（Material UI）中，disablePortal 属性用于控制组件是否使用 Portal 来渲染其子组件。Portal 是一种 React 技术，允许将子组件渲染到父组件之外的 DOM 节点中。默认情况下，某些 MUI 组件（如 Popper、Modal 和 Autocomplete）会使用 Portal 来避免渲染问题。 1. disablePortal 的作用 默认行为：当 disablePortal 未设置或设置为 false 时，组件的子元素将通过 Portal 渲染到页面的 body 中。 禁用行为：当设置 disablePortal={true} 时，子组件将保留在其父组件的 DOM 层级结构中。 2. 使用场景 避免滚动问题：在某些情况下，使用 Portal 可能会导致滚动行为不符合预期。通过设置 disablePortal={true}，可以自由实现滚动行为。 服务器端渲染：React 不支持服务器端渲染的 createPortal()...

在 TypeScript 中，... 语法有多种用途，主要用于扩展运算符（Spread Operator）和剩余参数（Rest Parameters）。以下是这两种用法的详细说明和示例： 1. 扩展运算符（Spread Operator）扩展运算符用于将数组或对象展开为独立的元素或属性。它在数组和对象操作中非常有用。 1.1 展开数组将一个数组的元素展开为独立的元素，可以用于数组拼接、函数参数传递等场景。 示例 1：数组拼接1234const array1 = [1, 2, 3];const array2 = [4, 5, 6];const combinedArray = [...array1, ...array2];console.log(combinedArray); // 输出: [1, 2, 3, 4, 5, 6] 示例 2：函数参数传递123456function sum(a: number, b: number, c: number) { return a + b + c;}const numbers = [1, 2,...

javascript 数组学习笔记，再此记录学习中遇到的一些方法。 Array.fromArray.from() 静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。 我们可以用 Array.from() 快速的创建我们需要的数组，下面就来学习以下吧。 1console.log(Array.from("123")) 输出：[ "1", "2", "3" ] 1console.log(Array.from([1,2,3], (x) => x * 2)); 输出：[ 2, 4, 6 ]

Paper 组件是 Material UI（MUI）中用于创建具有层次感和阴影效果的容器组件。它模拟了物理世界中纸张的外观和感觉，通过阴影和表面属性来增强视觉层次感。Paper 组件通常用于构建卡片、对话框或其他需要提升视觉效果的表面。 Paper 的核心属性有 elevation、variant、square和 sx。 elevation 属性elevation：控制组件的阴影深度，取值范围为 0 到 24。数值越大，阴影越深，组件看起来越“高” 12345678910111213141516171819202122232425262728293031323334353637383940import { Paper, Box, Stack, styled } from "@mui/material";import { green } from "@mui/material/colors";const MyPaper = styled(Paper)(({ theme })...

首先我们在 src 目录中创建一个 theme.tsx 文件，我们可以在这个文件中创建多个主题，以后这个文件就是我们写主题相关的主要文件。 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465import { createTheme } from "@mui/material";import { purple } from "@mui/material/colors";export const navTheme = createTheme({ components: { MuiButton: { defaultProps: { variant: "outlined", color:...