Question

我发现this answer for tracking page size的代码段非常有用。我想将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

要使用ref扩展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的生活中的好例子。

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

Answer 3

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

React documentation on refs

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

在此组件中引用此dom节点，您只需调用this.componentName

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

在状态中反应div的轨道高度？

3 个答案: