反应状态下div的轨道高度？

Question

我发现this answer for tracking page size 的代码 sn-p 很有用。我想把window.innerHeight换成$("#list_container").height：

constructor(props) {
  super(props);
  this.state = { width: 0, height: 0 };
  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}

componentDidMount() {
  this.updateWindowDimensions();
  window.addEventListener('resize', this.updateWindowDimensions);
}

componentWillUnmount() {
  window.removeEventListener('resize', this.updateWindowDimensions);
}

updateWindowDimensions() {
  // !!! This works:
  this.setState({ width: window.innerWidth, height: window.innerHeight });
  // !!! This doesn't work:
  this.setState({ width: $("#list_container").width(), height: $("#list_container").height() });
}

编辑：更新为 .width() 和 .height()，两者都尝试过，但都不适合我。

列表容器与外层div在同一个模块中定义：

render() {
  return (
    <div id="list_container">
      <ListGroup>
        <VirtualList
            width='100%'
            height={this.state.height}
            itemCount={this.state.networks.length}
            itemSize={50}
            renderItem={({index, style}) =>
              <ListGroupItem
                onClick={() => this.updateNetwork(this.state.networks[index].ssid, this.state.networks[index].security)}
              action>
              {this.state.networks[index].ssid}
            </ListGroupItem>
          }
        />
      </ListGroup>
      <Modal/>
      // ...

注意：

如果我这样做：

<p>{this.state.height}</p>

它不是0 只是空的，示例不起作用。

Answer 1

如果您使用的是 jQuery，width() 和 height() 是函数，而不是属性。试试：

this.setState({ width: $("#list_container").width(), height: $("#list_container").height() });

Answer 2

你需要使用 refs，因为 js 可能在组件渲染到 dom 之前运行。

React documentation on refs

render() {
  return (
    <div id="list_container" ref={ el => this.componentName = el }>
      // ...

要在这个组件中引用这个 dom 节点，你只需要调用 this.componentName

updateWindowDimensions = () => {
  $(this.componentName).height()  // returns height
}

Answer 3

要使用 refs 扩展 Erics 的答案，要在不使用 jQuery 的情况下完成，您可以使用 getBoundingClientRect：

const listRect = document.getElementById('list_container').getBoundingClientRect();

或者如果使用来自 Erics 的参考答案：

const listRect = this.componentName.getBoundingClientRect();

紧随其后

this.setState({ 
  width: listRect.width, 
  height: listRect.height
});

我建议this page 提供一些没有 jQuery 的生活的好例子。

另外，我强烈建议取消调整大小处理程序。