单行文本超出宽度省略
.ellipsis {
display: inline-block;
max-width: 120px; /* 设置宽度 */
overflow: hidden; /* 超出部分隐藏 */
white-space: nowrap; /* 不换行 */
text-overflow: ellipsis; /* 显示省略号 */
}
安装cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com
git首次推送
git init
git add .
git commit -m "init"
git branch -M main
git remote add origin https://xxxxxx.git
git push -u origin main
CSS动画相关属性区分
Object.is()
Object.is()用于确定两个值是否为相同值。
语法：Object.is(value1, value2)
- 与
==运算符的区别：
==运算符在比较时会对两个操作数进行类型转换（如果它们不是相同的类型），Object.is()不会对其操作数进行类型转换。
- 与
===运算符的区别：
Object.is()和===之间的唯一区别在于它们处理带符号的 0 和 NaN 值的时候。=== 运算符（和 == 运算符）将数值 -0 和 +0 视为相等，但是会将 NaN 视为彼此不相等。
渲染属性（render props）
在 React 中，渲染属性（render props）是一种用于组件复用的模式，它允许组件通过一个名为 render 的函数属性来控制其渲染输出。
使用渲染属性的组件通常具有以下特点：
- 它们接受一个名为
render的函数属性作为其子元素。 - 在组件内部，它们会调用
render函数，并将一些数据或逻辑作为参数传递给它。 - render 函数会返回一个
React元素，用于定义组件的渲染输出。
import React from 'react';
// 创建一个接收渲染属性render的组件
function ProductData({ render }) {
// 只用于获取产品数据
const [products, setProducts] = useState([])
useEffect(() => {
getProducts().then(products => setProducts(products))
}, [])
// 具体的渲染内容由render处理
return render({ products })
}
// 场景一
<ProductData
render={({ products }) => <ProductList products={products} />}
/>
// 场景二
<ProductData
render={({ products }) => <ProductTable products={products} />}
/>
// 场景三
<ProductData render={({ products }) => (
<h1>
Number of Products:
<strong>{products.length}</strong>
</h1>
)} />
IOS移动端的兼容问题
- input聚焦时页面被放大
使用 viewport meta标签限定最大、最小的缩放比例，禁止用户缩放操作。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- Safari的高度计算问题
在Safari浏览器中，100vh 是包含地址栏、操作栏的高度，因此会出现滚动条。使用 svh（small vh）或 dvh（dynamic vh）单位可以解决，但要注意兼容性。
body {
height: 100vh; // ×
height: 100svh; // √
height: 100dvh; // √
}