单行文本超出宽度省略
.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; // √
}