Question

我可以使用哪一个生命周期步骤来获取列灵活表的宽度来设置像div这样的固定标题。例如：

var dataTable = this.refs.table;
    if (dataTable !== undefined){
        this.headers = [];
        var cells = dataTable.rows[0].cells;
        for (var i = 0; i < cells.length; i++){
            this.headers.push(
                <div style = {{width: cells[i].offsetWidth}} key = {i}>
                    {this.props.DB.activeSchema.fields[i].name}
                </div>
            );
        }

    }

...

render: function() {
 return(
 <div>
   {this.headers}
   <table class='some-fixed-table'>
      ...
   </table>
 </div>

 )

}

这是一种简单的实现方式，使用几乎纯粹的js：

$('document').ready(function (){

  var fields = [
    'First',
    'Second',
    'Third'
  ];

  var cells = document.getElementById('table').rows[0].cells;

  for (var i = 0; i < cells.length; i++){

    var container = document.getElementById('tableHeader');
    var header = document.createElement('div');

    header.innerHTML = fields[i];
    header.style.width = cells[i].offsetWidth + 'px';  
    container.append(header);
  };
});

Answer 1

我可以使用哪一个生命周期步骤来获得列宽度的灵活性用于设置固定标题的表格，如div's。

通常使用componentDidMount，但当宽度与道具一起更改时，也请使用componentWillReceiveProps。

Answer 2

尝试react-measure获取标题的维度。我相信它会对你有所帮助。

从DOM元素获取值，然后使用React.js设置为另一个

2 个答案: