react + layui 坑总结

与react 结合的时候,layui 是纯dom操作,而react是虚拟dom ,二者的结合难免会出现诸多问题。

1 select 下拉框

默认值的修改要通过defaultValue 属性来修改,并且通过componentDidMount 来重新渲染from.render(),

而且渲染到页面中,不是data开头的属性,react 不会加载该属性。只能通过componentDidMount 中重新增加属性。

如:

export const LanguagePairs = React.createClass({

getInitialState() {

return {};

},

componentDidMount(){

$(‘select‘).attr(‘lay-verify‘,‘required‘);

layui.use([‘form‘], function(){

var form = layui.form();

form.render(); //更新全部

});

},

render(){

const self = this ;

return <select name={this.props.name} lay-filter="aihao" lay-verify="required" disabled={this.props.disabled || false } defaultValue={this.props.checkedLanguage || ‘‘}>

{

(this.props.name == ‘srcLanguage‘ && this.props.isChecked) ?

<option value="999">自动检测</option>

: <option value=""></option>

}

{

language.map((data,index)=>{

for( let k in data ){

return <option key={index} value={k}>{data[k]}</option>

}

})

}

</select>

}

});

2  layui 分页模块的处理

开发过程中经常要做 ajax 异步请求返回数据,来做分页处理。但是在实现的时候可以这么做,将laypage 定义为顶部变量,并且layer.use函数中定义,然后在ajax返回数据后在给laypage 赋值。

let laypage ;

ayui.use([‘laypage‘], function(){
laypage = layui.laypage
,layer = layui.layer;
});
laypage({
cont: ‘demo1‘
,pages: 100 //总页数
,groups: 5 //连续显示分页数
});

3 layui 弹窗点击取消的时候 会在url 后面增加from字段信息

默认也会提交,只要增加 return false 即可。

时间: 2024-08-10 02:04:39

react + layui 坑总结的相关文章

React爬坑秘籍(一)——提升渲染性能

React爬坑秘籍(一)——提升渲染性能 ##前言 来到腾讯实习后,有幸八月份开始了腾讯办公助手PC端的开发.因为办公助手主推的是移动端,所以导师也是大胆的让我们实习生来技术选型并开发,他来做code review.之前也学习过React,当然也是非常合适这一次的开发. 我会梳理这一个月来,自己对架构的思考过程和踩过的坑.当然这一切都不一定是最佳的,所以希望能有更多的建议和讨论. 例子所需库:Webpack.React.Immutable.其中Webpack用于前端构建,如果不清楚的同学可以看这

React踩坑记(一)——API React和ReactDOM,擅自引入cdnjs的后果

今天开始学习React,一开始就遇到好多坑,花了不少时间(当然也是花费了指导我的那位大神的时间). 特此记录,也方便有人踩坑的时候避免这样的情况再出现. 中文网站和国外官网 首先说一下英文官网:http://facebook.github.io/react/index.html 作为一个英文差到极点的程序员小白,在这门技术面前毅然决然地选择了中文官网:http://reactjs.cn/ 但是!这是一个坑点,因为技术更新的原因,肯定在中文网的版本跟官网的版本是有落差的.所以在跟着中文网的教程敲代

React 踩坑笔记

props可以用两种理解,一是可以被当做构建React节点的参数,二是可以被理解为HTML标签的属性.具体如下 当props与一个已知HTML属性相同时,当他被加入最终DOM中的HTML元素时,它就是该元素的属性: 当被传入React.createElement()中当做参数时,也可以是React node实例里的各种值. 一些特殊的用法,比如说key.ref.dangerouslySetInnerHtml React Stateless Function Component(无状态函数组件)

React入坑之路(一)

1.funciton mapStateToProps(state){ console.log("Data page:",state) //每个界面都可以打印出所有的state或者部分 const{davices,locations,batterystate} = state;//从所有的state里提取部分所需数据 return { devices,locations,batterystate } } 从整个state里面获取全部state或者部分所需数据到页面 function ma

新版react踩坑总结

使用es6语法与原本es5语法几个有区别的地方 1.React.creatClass与React.Component 1 var Component = React.createClass({ 2 render() { 3 return ( 4 <div></div> 5 ); 6 } 7 }); 1 class Component extends React.Component { 2 constructor(props) { 3 super(props); 4 } 5 rend

航遇项目react踩坑

1.iconfont应用: a.正常用法如下 <span className='iconfont' > iconfont的代码,例如: </span> b.react不能动态渲染iconfont标签,需如下处理,icon为形参 <i dangerouslySetInnerHTML={{__html: icon}} className={'iconfont'} /> c.引入项目中:需要在项目中复制iconfont的地址代码,类似如下的地址,官网生成 @font-fac

react踩坑记录——使用fetch获取json数据报错

报错: 原因其实是list.json文件路径错误,该文件路径是相对于index.html的,而不是App.js或者index.js.

我两年的web开发生涯

我两年的web开发生涯 与以前的文章分享给大家自己的知识和观点不同,这篇文章更多的是写给自己的总结. 现在是 2017年10月18. 从 2015年9月 开始接触前端开发,至今两年零一个月. 从 2016年3月 入职中油瑞飞从事相关工作,至今一年零七个月. 目前我即将离职,并于下个月加入一点资讯. 本文只涉及到技术话题,更像是流水账一样记录我两年以来的成长. 下水 当时离毕业还有半年,编程语言玩的溜的只有 Matlab,但这货毕竟主要用于科学计算,称霸于校园和各大实验室.我还是打算深入一门商业性

初用react容易踩的坑

此文章同步连接: https://github.com/p2227/p2227.github.io/issues/3 # 初用react容易踩的坑 ## 自定义组件忘记大写第一个字母 ```javascript var myComp = React.createClass({ render: function() { return <div>Hello world</div>; } }); ReactDOM.render(<myComp />, mountNode);