React项目实践
一生注定学霸命
这个作者很懒,什么都没留下…
展开
-
【大屏可视化】大屏适配公式
1.大屏适配公式设计稿尺寸:16:9大屏:显示16:91.如果屏幕很宽,就以高度为基准,左右居中2.如果屏幕很高,就以宽度为基准,上下居中3.保持比例不变形在 head 里用 JS设置 1rem=Wp/100Wp是页面有效宽度2.实践:布局和适配在网站下载设计图之后,在Photoshop中打开1.测量设计图尺寸工具:m 框选——打开窗口–信息——这样可以保证画布大小比例一致2.取色:取色工具1.屏幕大小获取设计图大小:m – ctrl+a1.全选获取设计图尺原创 2021-06-29 19:23:18 · 1547 阅读 · 1 评论 -
React路由:页面跳转
Route之exact页面转跳1.用 Link 标签将内容包起来2.<Link to={'/tags/'+tag}>——后面的tag应该是ID3.点击link标签里面的内容会转跳相应页面,新建一个对应路由即可4.添加样式:Link标签本质 a标签添加路由1.路由的内容不能写死,因为不知道后面用户会添加什么内容2.<Route path="/tags/:tag">——:tag:匹配所有非斜杠的内容,且内容命名为 tag3.问题:如果存在 /tags 的路径,也会原创 2021-06-22 13:54:18 · 453 阅读 · 0 评论 -
受控组件和非受控组件的区别
受控组件受控组件就是必须要控制它,实时监听给input添加 value={note} 就变成受控组件监听 value 的 onChange 事件,note 改变的时候就 setNote,控制了 input 的读写React的严格模式(<React.StrictMode>)会让 console.log(note)打出两遍,不影响const NoteSection: React.FC = () => { const [note, setNote] = useState('')原创 2021-06-21 18:34:15 · 902 阅读 · 0 评论