react

antdesign Tree组件的动态新增数据如何默认展开

antdesign Tree组件的动态新增数据如何默认展开 defaultExpandAll 只会在第一次有效，如果你不想自己控制 expandedKeys 的话就删除 Tree，setTimeout 后再加回来。否则 Tree 会被复用。 <> <Tree defaultExpandAll blockNode className='TreeGroup' key={currentKey} > { this.renderTreeNodes(data) ...

2020年10月25日 react 暂无评论喜欢 0 阅读 38 次阅读全文

react antdesign中input输入框输入时失去焦点

可以看到，每次输入的时候都要点击一下输入框才能继续输入，即表示每次输入后输入框已经失去焦点了。查阅相关资料后发现是因为 reactNode 的 key 设置不当引起的，开发过程中为了省事，直接生成 UUID 作为 reactNode 的 key 导致每次视图重新渲染之后都生成了一个新的reactNode，react 无法分辨新 reactNode 和旧 reactNode 之间的关系，所以引起失去焦点。解决办法也很简单，最简单的办法就是将 key 设...

2020年09月09日 react 暂无评论喜欢 0 阅读 157 次阅读全文

React 组件间通讯

React 组件间通讯说 React 组件间通讯之前，我们先来讨论一下 React 组件究竟有多少种层级间的关系。假设我们开发的项目是一个纯 React 的项目，那我们项目应该有如下类似的关系：父子：Parent 与 Child_1、Child_2、Child_1_1、Child_1_2、Child_2_1 兄弟：Child_1 与 Child_2、Child_1_1 与 Child_2、etc. 针对这些关系，我们将来好好讨论一下这些关系间的通讯方式。（在 React 中，React 组件之间的...

2017年01月16日 react 暂无评论喜欢 0 阅读 149 次阅读全文

react子组件如何向父组件传值

其实很简单，概括起来就是：react中state改变了，组件才会update。父写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父的函数，同时引起state变化。子组件要写在父组件之前。具体写法看下面3个例子。例子1.这里如下图，用户邮箱为父，绿色框为子。父组件为用户输入的邮箱设好state，即“{email: ''}”，同时写好处理state的函数，即“handleEmail”，这两个名称随意起；再将...

2017年01月08日 react 暂无评论喜欢 0 阅读 554 次阅读全文

使用Redux管理你的React应用

因为redux和react的版本更新的比较频繁，博客园这里用的redux版本是1.0.1，如果你关心最新版本的使用技巧，欢迎来我的Github查看(https://github.com/matthew-sun/blog/issues/18) ，我会在这里进行持续的更新和纠错。 React是最好的前端库，因为其发源于世界上最好的后端语言框架。 ---信仰 4.0 will likely be the last major release. Use Redux instead. It's really great. —Flummox框架作者 acdliteA...

2017年01月08日 react 暂无评论喜欢 0 阅读 360 次阅读全文

Redux状态管理方法与实例

状态管理是目前构建单页应用中不可或缺的一环，也是值得花时间学习的知识点。React官方推荐我们使用Redux来管理我们的React应用，同时也提供了Redux的文档来供我们学习，中文版地址为http://cn.redux.js.org/index.html 前言虽然官方文档上说只需几分钟就能上手 Redux，但是我个人认为即便你看个两三天也可能上手不了，因为文档里面的知识点不仅数量较多，而且还艰涩难懂，不结合一些实例来看很难...

2017年01月08日 react 暂无评论喜欢 0 阅读 102 次阅读全文

React在ES6中的用法

入门级Demos 先来几个简单的demo体验一把。注意，例子里ES5的require请通过browserfiy或webpack来实现，如果你还不会用这两样东西，请出门后往前看。 “Hello,XXX”输出 ES5写法： var React = require('react'); var HelloMessage = React.createClass({ render: function() { return (<h1>Hello,{this.props.name}!</h1>); } }); module.exports = React.crea...

2017年01月07日 react 暂无评论喜欢 4 阅读 1,764 次阅读全文

ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上) ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(下) React 示例项目 · 简易留言板 + 待办事项 React 设计思想

2016年11月18日 react 暂无评论喜欢 0 阅读 74 次阅读全文

栾一峰react教程笔记

栾一峰react教程笔记 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> <script src="js/jquery.min.js"></script> <script src="js/marked.m...

2016年09月15日 react 暂无评论喜欢 0 阅读 252 次阅读全文

React组件生命周期过程

实例化首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getInitialState componentWillMount render componentDidMount 存在期组件已存在时的状态改变 componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate 销毁&清理期 componentWillUnmount 说明生命周期共提供了10个不同的API...

2016年09月12日 react 暂无评论喜欢 0 阅读 120 次阅读全文