![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React笔记
React基本用法笔记
ooooooMpr
这个作者很懒,什么都没留下…
展开
-
2021-08-14 react笔记-1 安装、环境搭建、创建项目
react学习笔记-1 安装、环境搭建、创建项目1、环境1、安装nodejs2.安装react脚手架工具 // cnpm install -g create-react-app 全局安装2、创建项目create-react-app [项目名称]3、运行项目npm strat //cd到项目文件夹进入这个页面 代表运行成功4、打包npm run build...原创 2021-08-14 14:33:06 · 74 阅读 · 0 评论 -
2021-8-14 react笔记-2 创建组件 基本用法
1、目录解析public中的index.html为入口文件src目录中文件很乱,先整理文件夹。新建components 放组件新建assets放资源 ->/images ->/css把乱的文件放进去 修改App.js 根组件和index.js入口文件中的引入路径...原创 2021-08-14 18:08:30 · 121 阅读 · 0 评论 -
react笔记 8-16 JSX语法 定义数据 数据绑定
1、jsx语法和vue一样 只能有一个根标签一行代码写法 return <div>hello world</div>多行代码返回必须加括号 return ( <div> <div> hello world </div> <div> .原创 2021-08-16 12:29:35 · 180 阅读 · 0 评论 -
react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历
1原创 2021-08-17 22:50:16 · 207 阅读 · 0 评论 -
react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值
1、定义方法并绑定class News extends React.Component { constructor(props) { super(props) this.state = { msg:'我是一个home组件' } } run(){ alert("我是一个run") //方法写在类中 } render() { return (原创 2021-08-18 21:19:45 · 155 阅读 · 0 评论 -
react笔记 8-19 事件对象、获取dom元素、双向绑定
1原创 2021-08-19 22:16:55 · 307 阅读 · 0 评论 -
react笔记 8-21 约束性 表单
1、约束性组件和非约束性组件非约束性组件<input type="text" name="" defaultValue={this.state.msg}></input>这里他的value是用户输入的值 并没有执行操作 只是获取到了msg的值 用户输入不会改变数据非约束性组件需要使用defaultValue获取数据 否则会报错约束性组件<input type="text" name="" onChange={this.inputChange}原创 2021-08-21 14:14:24 · 101 阅读 · 0 评论 -
React 笔记 父子组件传值 | 父组件调用子组件数据 | defaultProps | propsType合法性验证
1.通过props实现父组件像子组件传值import Header from "./Header"render(){ return( <Header msg={"我是props传递的数据"}/> )}import React,{Component} from "react";class Header extends Component { constructor(props){ super(props) t原创 2021-09-11 15:04:05 · 119 阅读 · 0 评论 -
react笔记 请求数据
React与其他框架一样 可以用多种方式请求数据。Axios fetch-jsonp fetch 均可以再react中使用 使用this时注意this指向下面是fetch-jsonp范例 解决跨域第一步安装npm install fetch-jsonp --saveimport fetch-jsonp from "fecth-jsonp...原创 2021-09-11 17:35:32 · 233 阅读 · 0 评论 -
react笔记 生命周期函数
componentWillMount 页面渲染前调用componentDidMount : 页面渲染完成后。 建议在此处发送数据请求componentWillReceiveProps 在props更新后执行shouldComponentUpdate 如果页面有更新操作执行 如果这个函数返回false 则不执行更新周期函数 为true则执行下方两个函数componentWillUpdate 组件接受到新的state 后调用componentDidUpdate 组件完成更新后调用com.原创 2021-09-11 19:35:58 · 51 阅读 · 0 评论 -
react笔记 路由 嵌套路由
使用路由首先需要安装react-router-dom随后引入react-router !!注意 首字母大写import {BrowserRouter as Router,Route,link} from "react-router-dom"1、根据网址自动判断页面随后在app根标签内 !!注意 exact path 如果你的 "/"默认地址没有用exact path 遇到"/home"会同时把 匹配为 "/"的页面和...原创 2021-09-12 19:37:32 · 153 阅读 · 0 评论 -
react笔记 动态路由 get传值
1、动态路由你在网站点击一个商品的时候。跳转到详情页面,可能会需要得到他是拿一个商品 传递一个id。此时便用到了动态路由,动态路由允许在你的router路由后追加数据。配置 你只需要在APP根组件中允许传值 通过link标签 追加/:[你的数据名] <Link to="/home/:aid">home</Link>这样你就可以在地址后追加你的数据了。发送 在home组件中<Link to={`detail/${th...原创 2021-09-13 19:24:30 · 483 阅读 · 0 评论 -
react注意事项 解析html代码方式 循环外的img报错处理
你请求到的数据有可能是写为html标签形式的因此你需要让react解析你的数据中的html代码并展示<div dangerouslySetInnerHTML={{__html:你的数据 this.state.xxx}}></div>这样 在react中 你的数据就会被解析为html标签...原创 2021-09-14 18:58:57 · 517 阅读 · 0 评论 -
react笔记 登陆成功后的JS路由跳转
如果想要在js中实现route页面跳转,你需要在引入react-router-dom时,新加入几个属性。import { BrowserRouter as Router, Route, Link,Redirect,withRouter } from "react-router-dom"\在你的state中定义用于判断是否登陆成功 之类的 所用的属性this.state={ loginFlag:false}...原创 2021-09-14 19:48:50 · 642 阅读 · 0 评论 -
react笔记 路由嵌套
如果你的项目需要很多个路由 传统的路由方式就显得十分臃肿因此我们需要对路由模块化import xxxrouter 记住 不要在import上面定义变量 会报错let routes = [{ path: "/", component: Home, exact: true}, { path: "/News", component: News, exact: false}, { path: "/", component: .原创 2021-09-14 20:55:28 · 197 阅读 · 0 评论