介绍 SheetJS js-xlsx 是一款能够读写多种格式表格的插件,浏览器支持良好,并且能在多个语言平台上使用,目前在 github 上有 12602 个 star, 刚好项目中遇到了前端解析 excel 的需求,所以就尝试使用了一下,这里将使用方法和遇到的问题简单记录一下. 插件地址:https://github.com/SheetJS/js-xlsx 使用 1. 安装依赖 进入项目文件夹,安装 xlsx npm install xlsx 2. 在项目中引入 import * as XLS

react获取当前页面的url参数,必须在url路由对应的组件上获取,在子组件上获取不到,为undefined,获取形如  /news/:id  的后面的参数 id this.props.match.params.id 获取形如 /news?id="abc"的  ?id="abc"  部分, this.props.location.search

react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www.npmjs.com/package/axios git项目地址:https://github.com/axios/axios axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域) npm官网:https://www.npmjs.com,在其搜索:axios即可看到详细说

点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框(不能删错了啊). 先说第一种方法 问题刚上手,首先规划级别:一个输入框和对应删除按钮为一个子组件,整体为父组件即可方便处理. 注意的点:生成的一坨输入框是一个数组,为了准确删掉对应项,生成时要编号.点击删除按钮要反馈对应编号,然后进行删除. 现在的逻辑是:整个待展示列表(由子组件组成的数组)是个st

参考:https://segmentfault.com/a/1190000012404114 两种方法,受控组件和非受控组件. 推荐使用受控组件,即通过this.state获取,因为其符合react规范: 受控组件示例,将文本框中字母转为大写 <input type="text" value={this.state.value} onChange={(e) => { this.setState({ value: e.target.value.toUpperCase(), }

在 react 组件的  componentDidMount 方法中打印一下 this.props,在浏览器控制台中查看输出如下: 其中页面的 url 信息全都包含在 match 字段中,以地址 localhost:3000/app/knowledgeManagement/modify/STY20171011124209535/3/1507701970070/0/?s=1&f=7 为例,其中各个参数定义对应如下: localhost:3000/app/knowledgeManagement/mo

1.在action  中发送请求,j将获取得到的token  储存起来 到localhost //登陆发送请求 export const loginUser = (userData,history)=>dispatch=>{ axios.post("/api/user/login",userData) .then(res=>{ const { token }=res.data; console.log(token); //储存token到local localStor

使用axios.fetchJsonp获取服务器的接口数据.其中fetchJsonp是跨域访问 一.使用axios 1.安装axios模块 npm install --save axios 2.引用模块 import axios from 'axios' 3.实现请求 import axios from 'axios'; const request = (url: string, params = {}, data = {}, options) => { // debug(url, params)

ajax() import React from 'react'; import ReactDom from 'react-dom'; import ajax from './tool.js'; class Nav extends React.Component{ constructor(){ super(); this.state = { arr: {} }; this.get = this.get.bind(this); } get(){ ajax('./data/data.json',fu

1. 直接new Component() 组件本身也是class,可以new,这样的组件实例意义不大 componentInstance = new Component(); 2. ReactDOM.render返回组件实例(React新版本已失效,返回null) componentInstance = ReactDOM.render(<Component />, div); 3. ref回调函数返回组件实例(React新版本可用) let componentInstance; ReactDO

在平时做项目的时候,使用到了redux, 如果获取服务器端的数据,例如返回一个  data = [1,2,3,4]data.map(item => item*2) , 这样使用的话如果数据正常获取到是没有问题的 如果数据没有获取到,或者是还没获取到的时候,data : undefine ,那么在使用map会产生错误, 此时我们应该做一下兼容,根据Es6的默认值,或者是 data = msg || [] 这样的话,就不没有错误了 这个其实都是在平时做项目中出得一些小问题,有时候网上还搜不到什么好的

1.通过 onChange -- e.target.value class App extends Component { state = { username: '张三' }; // 用户名 getUserName(e){ console.log(e.target.value); this.setState({ username: e.target.value }); console.log(this.state.username); // setState为异步,存在延迟 } render(

继承自React.Component的this.props.location.query对象下有当前url的各种查询参数.简单的例子:在控制台打印这个对象 import React from 'react'; class Hello extends React.Component{ constructor(props) { super(props); console.log(this.props.location.query); } render() { return(<div>我是hello

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

1.ref //class my_filter(reg){          const inpVal = this.input.value;          console.log(inpVal); console.log(reg);      };   //render <input  type="text" ref={input => this.input = input}  defaultValue = 'helloworld!' /> <button

React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Native 的代码只兼容两个平台(iOS 和 Android),并没有兼容 Web 端访问.这里是因为 Facebook 开发人员认为 Web 端天生兼容性就巨麻烦,而且平台差异性是注定存在而且也要保留的,所以 React Native 的目标是 Learn once, write anywhere ,而

2015-02-12 Created By BaoXinjian

React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Native 的代码只兼容两个平台(iOS 和 Android),并没有兼容 Web 端访问.这里是因为 Facebook 开发人员认为 Web 端天生兼容性就巨麻烦,而且平台差异性是注定存在而且也要保留的,所以 React Native 的目标是 Learn once, write anywhere,而不

文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React. React 中的元素.组件.实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念.现在,老干部就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字.刨根问底的同学(老干部就是其中一员)的好奇心. 元素 (Element) Rea

其实差不多, 都需要先安装路由 React  先安装 cnpm install react-router-dom --save 在再根组件引入 import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 这个严格匹配要注意(vue没有好像)     这个动态路由传值,对应 的组件获取值 在DidMount里面去获取 this.props.match.params vue的话是this.$route.p

先在在学习react,react是faceBook推出的框架,因为虚拟DOM使页面性能提高很大,特别react Native非常适合移动端,现做一个学习总结: 1.react 获取DOM的两种方式是ReactDOM.findDOMNode,this.refs.xxx. 例如: let ele = findDOMNode(this.refs.content);let ele2 = this.refs.content;·········································