react-bootstrap-table：如何以编程方式设置BootstrapTable元素的高度？

Question

我需要以编程方式设置BootstrapTable元素的高度（因为我想确保表格将可用空间置于浏览器窗口底部）。我试图设置div的CSS属性height与CSS类react-bs-table（这是如果我将它设置在BootstrapTable元素的height属性中，高度将会去的地方）。看起来是这样的：

componentDidMount() { 
    // Calculate the height 
    let height = 200; // Only simluated here! 

    // Set the height 
    const tableElement = document.getElementsByClassName('react-bs-table')[0]; 
    tableElement.style.height = height + 'px'; 
} 

问题这种方法是，BootstrapTable溢出的数据行它的下边框。看起来像这个溢出的高度是标题的高度。

Fiddle

我怎样才能设置一个BootstrapTable的高度正确（没有数据行溢出的元素）？

Answer 1

您应该使用的<BootstrapTable>的maxHeight道具（不height）来设定的高度，而不是修改DOM元素。

看一看的official docs：

使用maxHeight设置表的最大高度。你需要给一个字符串像height的单元（像素）值：

只是做了以下变化：

componentDidMount() { 
    let height = 200; 
    this.setState({tableHeight: height + "px"}); 
} 

render() { 
    ... 
    <BootstrapTable maxHeight={this.state.tableHeight} id="table" data={this.state.products} striped hover> 
    ... 
} 

你可能想在构造函数初始化this.state.tableHeight，以及...

jsfiddle

---

如果你仍然要更新的样式日你这样做，直接通过DOM，而不是与之反应（虽然灰心）电子方式，你可以这样做：

componentDidMount() { 
    let height = 200; 
    const tableElement = document.getElementsByClassName('react-bs-container-body')[0]; 
    tableElement.style.maxHeight = height + 'px'; 
} 

请注意，我用react-bs-container-body，而不是react-bs-table。

jsfiddle