项目总结-REACT-1

1、实现页面跳转 <Link to ={ {

pathname:`跳转地址`,

query:{

携带的数据

}

}}>

2、DailyReportTable 中的onLoad 中的this.props.

没有值,或者不声明的时候 解构赋值出的变量是undefined

3、Antd.Spin 标签中放置内容,显示的时候内容就会在加载中

4、部分逻辑放在封装的组件当中,

5、页面刚一进入产生的逻辑可以放在生命周期函数中componentWillMount。Props change改变就用componentWillReceiveProps,State change 就用shouldComponentUpdate

6、

Object.prototype.toString.call(data[datakey]) == [object Array]

7、关于React,存在constructor 就必须加super  ,如果需要在constructor中使用this.props ,就写 super(props)

8、如果需要在URL中拼数据传递参数 可以用this.props.location.query 进行获取

9、判断是否按钮是否禁止: 写一个函数,把数据传入 ,在函数中进行判断,

isDisable = (list) =>{

for(let i = o; i<list.length ; i++){

if(list[i].length == 0){

return true

}else {

return false

}

}

}

let disable = isDisable(list)

10、浏览器的回退功能

browserHistory.push({
     pathname: `/daily/profile`,
     query: {name: this.state.name, id: this.state.productIdtime:this.state.time}
});

使用browserHistory 这个需要在服务器进行一些配置

11、实现表单控件提交

fileChange = () => {
    let fileData = $("#file")[0].files[0];
    if(fileData){
        let file = new FormData();
        file.append(‘file‘, fileData);
        file.append(‘productId‘, this.state.productId);
        file.append(‘recordDay‘, this.state.time);
        this.setState({uploadLoading: true});
        let api = ‘/api/daily/report/import‘;
        $.ajax({
            type: ‘post‘,
            url: api,
            data: file,
            processData: false,
            contentType: false,
            success: this.handleSuccess
        });
    }
};

点击input type = file 的时候 触发上面的事件,发送表单中的数据,实现文件的上传

12、如果要实现Loading效果,就直接把spin 包裹loading的标签,然后用 spinning = true/false 进行判断加载还是不加载

13、判断这个按钮出现还是不出现,可以在render return 之前把按钮的代码写在一个变量中,这个变量可以在判断条件下存取按钮代码,然后在return 中 {变量} 进行解构

14、显示产品名字,超过9个字就显示。。。Tooltip 文字提示

把text 传入,text指的是产品名字

render: (text) => {
    if(text.length > 10){
        return (
            <Tooltip title={text}>
                <span>{text.slice(0,9) + ‘...‘}</span>
            </Tooltip>
        );
    }
    return text;
}

时间: 2024-10-19 21:08:08

项目总结-REACT-1的相关文章

从零开始的Android新项目10 - React Native &amp; Redux

本篇来讲讲 React Native 和 Redux,和其他一上来就啪啪啪丢上来一堆翻译的东西不同,本文会从简单的例子入手,让大家能快速地明白 React Native 是什么,Redux 和常见的 MVC.MVP 等有什么区别,怎么去组织一个 Redux 架构的 React Native 项目. 为避免大家还没入门就放弃,预计下一篇才会从我们项目中的实践出发,讲讲更复杂的应用场景. 什么是React Native React Native 使你能够基于 JavaScript 和 React 在

个人搭建的React项目之React音乐播放器

该项目是本人自使用react框架以来制作的较大的项目,目前该项目放在github上,感兴趣的朋友可以去看看一下,觉得还行的话可以给个star,哈哈 地址:https://github.com/cocoxiaoyue/react-music-player 项目环境 运行 1.该项目是基于node环境,通过create-react-app搭建的react项目,所以该项目应在装有node的机器上运行. 2.该项目运用的是网易云音乐接口,所以应该下载网易云音乐接口项目https://github.com

【React Native开发】React Native移植原生Android项目

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50519677 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 前三节课程我们已经对于React Native For Android的环境搭建,IDE安装配置以及应用运行,调试相关的知识点做了讲解.今天我们来讲一个非常有用的知识点.移植我们已有

React Native集成到现有项目(非cocoa pods)

将一个现有的ios项目添加react native支持时,有以下几个关键步骤: 在项目里新建一个group,然后在node_modules下面找到React和Libraries两个文件夹,将这两个文件夹下的.xcodeproj文件引入到我们创建的group中. 找到项目的build settings配置,在Header Search Paths下面新增一个地址,定位到node_modules/react-native/React目录下,选择递归(recursive). 找到项目的build ph

利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载

如何设计一个大型 web 项目? React + webpack 如何按需加载? React + React-Router 4 + webpack 如何按需加载? React + Redux + React-Router 4 + webpack 如何按需加载? 实录提要: bundle-loader 和 Webpack 内置的 import() 有什么区别? 按需加载能否支持通过请求后台数据,动态配置页面的的应用场景? 参与过几个 React 项目,被依赖包搞的晕晕的,不知道该怎么选择? 什么包

react创建新项目并且修改配置文件

react创建项目 这是我在用react搭建项目时,用到的一些东西,顺序纯属自己定义, 一.创建项目 用react 创建一个项目,这也是官方给出的 1.npm install create-react-app -g 2.create-react-app react-demo  (react-demo项目名) 3.cd react-demo 4.npm install 5.npm start     //运行 二.配置路由 1.安装 npm install --save react-router-

vue、react等单页面项目部署到服务器的方法及vue和react的区别

最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...用react做的项目也同样遇到类似问题.现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.so

【共享单车】—— React后台管理系统开发手记:项目准备

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.项目概述       React全家桶 React基础知识.生命周期 Router 4.0 语法讲解 Redux集成开发      AnD UI组件 最实用基础组件 AntD栅格系统 ETable组件封装 BaseForm组件封装 表格内嵌单选.复选封装      公共机制封装 Axios请求

搭建React项目环境

1.安装NodeJS6.0以上自带npm依赖包管理工具 2.webstrom 2019.2 工具 1.在cmd输入node -v就可以看到node的当前版本 2.在输入node进入node环境 3.查看npm版本号:npm -v 4.再次输入npm可以看到下面有哪些包 5.下一个全局安装react -app :install create-react-app yarn -g 6. 下面在webstrom工具中创建React项目引用React所需要的依赖 7.项目构架: 启动项目进行访问:npm 

react 项目学习

1-2 前置准备 开发环境: Node.js(v8.2+) NPM(v5.2+) Visual Studio Code(VS Code) VS Code常用插件: Prettier-Code formatter  格式化代码 Reactjs code snippets 快速生成 react 常用模块化代码 Auto Rename Tag 对相关标签重命名时,对应标签相应改变 主要依赖库版本(需高于以下版本): React: ^16.4.1 Redux: ^4.0.0 React Redux: ^