react
react学习
QM_姚丹
这个作者很懒,什么都没留下…
展开
-
react之redux的使用
这是上篇redux简单介绍及写法redux简单使用,场景:我们实际项目开发中可能需要多个通知,比如购物车一个数量的通知,个人信息变化的通知,那么如果写的。主要思路其实就是在入口组件,将多个通知储存合并一下就好了,具体代码示例如://这行代码用来创建储存,储存多个取值let reducers = combineReducers({ //用来计数的存储 counterRedu...原创 2019-06-10 19:04:59 · 349 阅读 · 0 评论 -
React又见路由之重定向路由
我们开发时有这么一个需求,就是在跳转个人详情,点击收藏等功能时,一定要先校验一下是否登录,如果登录再跳转个人详情等界面。那么就要在路由这一块做一下手脚我们下面的代码要做的事是,点击详情,如果已经登录就进入详情,如果没登录,就进入登录界面一、我们先写一个登录界面吧import React from 'react';import HeaderComponent from '../common/...原创 2019-05-09 15:18:24 · 2402 阅读 · 0 评论 -
react的props和state及生命周期
this.state是异步调用原创 2019-04-25 18:19:54 · 1467 阅读 · 0 评论 -
React子组件显示父组件插槽里面的内容
父组件代码render() { <PortalsComponet>父组件的内容</PortalsComponet>}子组件代码export default class PortalsComponet extends Component {render() { return ( <div>子组件显示:{this.props.c...原创 2019-04-25 19:17:03 · 899 阅读 · 0 评论 -
React使用fetch进行网络请求示例
我网络请求的接口为请求测试地址:http://www.xn--7t0ay76a.xn--6qq986b3xl/requestdemo/login请求方式:post请求参数: name:"admin", pwd:"123456"请求头: 'content-type': 'application/json'请求成功返回值:{"flag":"200","message":"请求.原创 2018-11-19 11:48:27 · 10584 阅读 · 1 评论 -
react子组件给父组件传值
子组件给父组件传值:子组件的代码: render() { return ( <div> {/*当input的值改变时将子组件的值传给父组件,toFatherValue是父组件一个属性,用来接口子组件的值*/} <input onChange={(e) => { ...原创 2019-04-25 18:51:52 · 7562 阅读 · 1 评论 -
react使用redux实现组件间的及时通讯简单用法
首先安装redux,先下命令npm install redux --save,然后再安装npm install react-redux --save原创 2019-06-10 17:58:42 · 1455 阅读 · 0 评论 -
React的refs和虚拟DOM的用法
让html标签原样输出,使用dangerouslySetInnerHTMLfunction App() { var name = "<span style='color: #FF0000;'>张三</span>"; return ( <div className="App"> 欢迎<span dan...原创 2019-04-24 17:08:47 · 516 阅读 · 0 评论 -
搭建react或者react native开发环境
安装环境首先安装node.js 的npm环境,后面我们要通过npm来安装react安装完成后,打开cmd,然后看一下node版本,得大于6.5以上,用命令行node -v然后安装react环境,通过在cmd下命令:npm install create-react-app -g创建一个项目名字叫my-project 下命令:create-react-app my-project,然后需...原创 2018-10-12 15:06:18 · 245 阅读 · 0 评论 -
React又见路由之子路由
我们做应用时经常需要做底部或者顶部导航切换变换页面功能,类似Android的导航+Fragment1、创业一个商城界面首页先加入路由 <Route path="/goods" component={GoodsIndex}/>import React from 'react';import HeaderComponent from '../common/header'im...原创 2019-05-09 12:01:51 · 6697 阅读 · 0 评论 -
react初见路由
第一种传有限参数首先创建路由创建/router/index.js文件,代码如下/* HashRouter:有#号 BrowserRouter:没有#号 Switch:只要匹配到一个地址不往下匹配,相当于for循环里面的break Link:跳转页面,相当于vue里面的router-link exact :完全匹配路由* */import React, {Fragment}...原创 2019-05-09 10:46:31 · 184 阅读 · 0 评论 -
初识ReactNative之布局
在ReactNative中,尺寸是没有单位的<View style={{ width:100, height: 10}}> <Text style={{ height: 17, ...原创 2018-11-30 10:42:31 · 375 阅读 · 0 评论