关于 ReactJS+ES6 组件开发重复渲染问题

大家好：我的前端项目是 React+es6+redux+webpack 结构

功能很简单，获取数据，渲染列表，问题在于，我把列表渲染完之后，需要调一个 bootgrid 的 jQuery 库，去生成分页和自定义操作的界面操作和效果，那么，在初次加载的时候，没有问题，但是在做 select 筛选的时候， componentDidMount 里面的没办法再次调用 bootgrid 的 jQuery 库，这样就导致了重新渲染的列表没办法展示其效果。我琢磨了很长时间，没找到解决办法。
请问各位，是否有办法解决这个问题？？？  在线等！

简单代码如下：
class ClientsHistory extends Component {
constructor(props) {
    super(props);
    this.state = {list: []};
}
componentDidMount(){
    let that = this;
    $("#tb-grid-data").bootgrid();
    let grid = $("#tb-grid-devicelist").bootgrid({
        formatters:{
            "operation":function(column , row){ 
                return 'aaa';
            }
        }
    });
}
changeSelect(sel_val){
    this.setState({devicesn:sel_val});
    // $("#tb-grid-devicelist").bootgrid('reload');

}
render(){
    let devicelist = GetLocalData(device_data_key);
    var rows = [];
    if(devicelist != null){
        var sn = this.state.devicesn;
        devicelist.forEach(function(result, index){
            if(typeof sn != 'undefined' && sn != ''){
                if(result.sn == sn){
                    rows.push(
                        <ClientRows rowdata={result} key={index} />
                    );
                }
            }else{
                rows.push(
                    <ClientRows rowdata={result} key={index} />
                );
            }
        });
    }
    return(
        <div className="card z-depth-1">
            <div className="card-header">
                <div className="div-tips-left">
                    <Select1 changeselect={this.changeSelect.bind(this)}/> 
                </div>
            </div>
            <div className="table-responsive">
                <table id="tb-grid-devicelist" className="table table-striped">
                    <thead>
                        <tr>
                            <th data-column-id="sn">aa</th>
                            <th data-column-id="uptime">bb</th> 
                        </tr>
                    </thead>
                     <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

}

simonlify

2016-08-24 21:53:23 +08:00

@arslion 这个问题确实是让我纠结半天多了，我之所以一直纠结这个问题，不是因为我没有别的解决办法，别的办法随便想想也有好几种。
只是本人刚做这种前端组件框架几个星期而已，很多原理方面的知识都不太清楚，如果碰到了这个问题，即使纠结这么长时间，也是搞清楚了蛮多别的问题，也算是避免以后再次踩类似这样的坑，不算没有收获

simonlify

2016-08-24 22:01:02 +08:00

@bdbai 还是不麻烦你啦， shouldComponentUpdate 去掉我也试过，没有效果，也许是我还理解的不够深刻吧，不过还是搞明白了很多问题
这个问题呢，我想来想去，没必要再纠结下去了，我换了一种方式去解决了
大概的思路就是， select 获取过滤条件后，不用 setState 去重新渲染子组件列表，我从 bootgrid.js 源码里面下手，修改了一些源码，不管怎么说，这个刷选，我算是搞定了
不过这个问题的本质，确实是没有解决的，我现在项目时间比较急，只能等有空了再来研究这个问题了
谢谢各位耐心的解答，非常感谢！

关于 ReactJS+ES6 组件开发 重复渲染问题

关于 ReactJS+ES6 组件开发重复渲染问题