react
文章平均质量分 84
杜杜的杜
这个作者很懒,什么都没留下…
展开
-
react 搜索数据案例
app.jsimportReact,{Component}from'react'importReactDOM,{render}from'react-dom';importlogofrom'./logo.svg';import'./App.css';importSearchfrom'./search'importListfrom'./list'importaxiosfrom'axios';exportdefau...原创 2021-05-31 17:07:30 · 300 阅读 · 0 评论 -
react-admin 项目运行
1.从github上clone下来 git clonehttps://github.com/marmelab/react-admin.git2.全局安装yarnnpm install -g yarn3. 安装包yarn install4. 在项目根目录运行yarn run-simple yarn run-tutorialyarnrun-d...原创 2019-03-15 17:45:34 · 979 阅读 · 0 评论 -
react -元素变量
使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分,而输出的其他部分不会更改。import React,{Component} from 'react'export default class If extends Component{ render(){ // 显示文字的组件 function Wel(){ ...转载 2019-03-20 16:52:04 · 642 阅读 · 0 评论 -
react定义组件两种方式,及渲染
函数定义/类定义组件import React, { Component } from 'react';// import img01 from './images/01.png'import './App.css';class App extends Component { render() { function Welcome(props){ re...转载 2019-03-18 14:35:03 · 902 阅读 · 0 评论 -
react提取组件
效果:将这部分的组件提出来import React, { Component } from 'react';// import img01 from './images/01.png'import './App.css';class App extends Component { render() { function Avatar(props){ ...转载 2019-03-18 15:46:27 · 895 阅读 · 0 评论 -
react-父组件将状态做为属性传递给子组件
数据自顶向下流动import React, { Component } from 'react';// import img01 from './images/01.png'import './App.css';class App extends Component { render() { class Son extends Component{ ren...原创 2019-03-19 10:21:12 · 1185 阅读 · 0 评论 -
react-children
组件列表项 ,循环ul li这是定义的子组件import React from 'react';function ListComponent(props){ return( <ul> { React.Children.map(props.children,function(child){...原创 2019-05-23 10:39:53 · 206 阅读 · 0 评论 -
react -propTypes属性验证和defaultProps属性默认值
显示的效果:原创 2019-05-24 10:07:42 · 826 阅读 · 0 评论 -
react - state状态改变的用法
实现这个效果,状态改变原创 2019-05-24 11:13:17 · 1404 阅读 · 0 评论 -
react -ui (antd)
https://material-ui.com/https://ant.design/index-cn https://mobile.ant.design/index-cn基于 React Native 的 iOS / Android / Web 多平台支持,组件丰富、能全面覆盖各类场景 (antd-mobile-rn) 适合于中大型产品应用 适合于基于 r...转载 2019-03-07 18:15:10 · 510 阅读 · 0 评论 -
react -从github上下载下来的项目怎么启动
1 . 刚从github上clone下来是没有node_modules的,需要安装,通过npm install安装必要的依赖2.根据什么信息安装依赖呢?就是你的package.json中的dependencies和devDepencies ,在本地安装的同时,将依赖包的信息(要求的名称和版本)写入package.json中是很重要3.npm install 模块:安装好后不写入p...转载 2019-03-15 10:05:35 · 8311 阅读 · 0 评论 -
react 组件对象的生命周期
1.从创建产生到结束的一个过程 --淡入淡出效果class Life extends React.Component{ constructor(props){ super(props) this.state={ opacity:1 } this.distoryComponent=this....转载 2019-02-27 11:45:08 · 115 阅读 · 0 评论 -
react 循环li ,react定义组件两种方式、组件属性state、props、refs和事件处理
const lists=['jquey','vue','react','angular']var vDom2= (<ul> { lists.map((item,index)=><li key={index}>{item}</li>) }</ul>)ReactDOM.render(vDom2,document....原创 2019-02-22 16:19:15 · 814 阅读 · 0 评论 -
react 虚拟DOM和DOM diff算法
1.虚拟DOM 可以更少的去操作真实DOM ,更新虚拟DOM界面不会重新渲染2.diff算法是来判断哪片区域需要更新,哪些不需要更新制作下面效果 ,时间每隔一秒更新class Life extends React.Component{ constructor(props){ super(props) this.state={ ...转载 2019-02-27 15:35:35 · 179 阅读 · 0 评论 -
react 评论管理效果实现
1.实现类似这样的效果2.定义几个组件,静态的 左边提交内容,右边评论列表,和每条评论内容3.app是公用组件import React, {Component} from 'react'import CommentAdd from './comment-add'import CommentList from './comment-list'export defa...转载 2019-03-01 14:19:14 · 1152 阅读 · 0 评论 -
react ajax请求的使用
1.react中使用ajax 需要使用第三方库 ,建议使用axiox测试接口2. npm 安装 axios $npm install axios 代码中引入axios import axios from 'axios';3.fetch请求的语法4.案例import React, {Component} from 'react'import axios...原创 2019-03-01 17:57:51 · 249 阅读 · 0 评论 -
react -实现用户搜索
1. 效果2.会用到组件的生命周期3.数组的map方法可以只保留json返回对象里指定的对象的值4.静态组件5. app.jsximport React, {Component} from 'react'import PropTypes from 'prop-types'import Search from './search'import...转载 2019-03-05 11:52:08 · 4239 阅读 · 0 评论 -
react -组件通信方式
通过第二种方式 ,实现search效果app.jsximport React, {Component} from 'react'import PropTypes from 'prop-types'import Search from './search'import Main from './main'export default class Page exte...转载 2019-03-05 14:22:41 · 132 阅读 · 0 评论 -
react 组件组合使用
1,todo-list 组件怎样组合使用class App1 extends React.Component{ // 初始化数据 constructor(props){ super(props) // 初始化状态 this.state={ todos:['eat','sweep','dddm'] ...原创 2019-02-26 16:24:30 · 431 阅读 · 0 评论 -
react表单数据提交
class LoginForm extends React.Component{ constructor(props){ super(props) this.state={ pwd:'' } this.handleSubmit=this.handleSubmit.bind(this) ...翻译 2019-02-26 17:52:49 · 4744 阅读 · 0 评论 -
react - router路由的使用
实现切换效果1.静态组件2.安装router npm install --save react-routerhttps://reacttraining.com/react-router/ 路由学习的官网-很多案例3.app.jsximport React, {Component} from 'react'import PropTypes from 'prop-...原创 2019-03-06 10:33:58 · 321 阅读 · 0 评论 -
npm构建react开发环境
1,使用淘宝镜像快速安装$ npm install -g cnpm --registry=https://registry.npm.taobao.org$ npm config set registry https://registry.npm.taobao.org2.执行以下命令创建项目$ cnpm install -g create-react-app$ create-re...原创 2019-02-21 14:25:37 · 522 阅读 · 0 评论