2022年1月8日
React中setState的使用
摘要： React中的setState既是同步也是异步 同步： 验证一：在setTimeout中的更新 changText(){ setTimeout(()=>{ this.setState({ increment:'你好啊，lpx' }) console.log(this.state.increment) 阅读全文
posted @ 2022-01-08 21:04 无何不可88 阅读(50) 评论(0) 推荐(0)
React中tab栏的实现
摘要： 父组件的代码展示 class App extends React.Component{ constructor(props){ super(props); this.state={ name:['流行','新款','精选'], //这些数据为tab栏展示的数据 currentTitle:'流行' } 阅读全文
posted @ 2022-01-08 17:58 无何不可88 阅读(413) 评论(0) 推荐(0)
2022年1月6日
跨组件通信的使用 Context应用场景
摘要： 方法一：通过父传子，一步一步向子组件传递数据 爷爷组件 class App extends React.Component { constructor(props){ super(props); this.state={ nickname:'kobo', level:99 } } render() 阅读全文
posted @ 2022-01-06 21:28 无何不可88 阅读(75) 评论(0) 推荐(0)
React插槽的实现
摘要： 方法一：通过 children获取 class App extends React.Component { render() { return ( <div> {/* <Header /> */} <NavBar> //子组件 <span>aaa</span> <span>bbb</span> <a 阅读全文
posted @ 2022-01-06 21:13 无何不可88 阅读(133) 评论(0) 推荐(0)
React 引入本地静态文件或图片
摘要： 之前我们引入图片可以直接使用 <img src="../assets/logo.png" alt="" /> 但在React中并不可用 推荐方法一： import logo from '../../assets/imgUrl/logo.png' export default function Hea 阅读全文
posted @ 2022-01-06 11:16 无何不可88 阅读(1470) 评论(0) 推荐(0)
创建React项目
摘要： 1. create-react-app 项目名称 2.关键文件夹：public 和 src public中编写index.html代码，例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv 阅读全文
posted @ 2022-01-06 09:27 无何不可88 阅读(360) 评论(0) 推荐(0)
2022年1月5日
React子传父
摘要： 父子之间的通信：子传父 子组件： import React, { Component } from 'react' export default class CounterButton extends Component { render() { const {increment} = this.p 阅读全文
posted @ 2022-01-05 21:56 无何不可88 阅读(481) 评论(0) 推荐(0)
React 父传子
摘要： 先展示父组件 import React, { Component } from 'react' import Banner from "../Banner/Banner" export default class Header extends Component { constructor(prop 阅读全文
posted @ 2022-01-05 17:25 无何不可88 阅读(501) 评论(0) 推荐(0)
CSS垂直居中
摘要： 居中元素宽高已知 1.absolute + margin auto 注意：父元素与当前元素的宽高已知 .parent{ position: relative; width: 500px; height: 500px; border: 1px solid blue; } .child{ backgro 阅读全文
posted @ 2022-01-05 10:14 无何不可88 阅读(201) 评论(0) 推荐(0)
2022年1月4日
React脚手架
摘要： 三大框架都有属于自己的脚手架 Vue的脚手架：vue-cli Angular的脚手架：angular-cli React的脚手架：create-react-app 使用脚手架依赖node环境 安装node ，官网地址：https://nodejs.org/zh-cn/ 用LTS版本，Current先 阅读全文
posted @ 2022-01-04 20:30 无何不可88 阅读(122) 评论(0) 推荐(0)