數據 rom 變量 elf 顯示 屬性。 exp 下拉 urn

與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 即可。

react + layui 坑總結