從DOM元素獲取值，然後設置爲另一個使用React.js

哪一個生命週期步驟可用於獲取列靈活表的寬度以設置固定標題，如div的。例如：從DOM元素獲取值，然後設置爲另一個使用React.js

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); 
    }; 
});

來源

2017-02-10 yoleo

嘗試react-measure以獲取標題的尺寸。我相信它會幫助你。

來源

2017-02-10 12:39:35

哪一個我可以使用生命週期步驟來獲得靈活的列寬度表設置像div的固定標題。

一般使用componentDidMount，但是當寬度與道具一起變化時，也使用componentWillReceiveProps。

來源

2017-02-10 12:38:03

從DOM元素獲取值，然後設置爲另一個使用React.js

回答

相關問題