0

I am having issues with react Plotly displaying correctly when a graph loaded in a hidden tab is selected. 似乎这是一个已知问题，除了默认选项卡之外的每个选项卡都不会适当地调整大小，因为它不知道隐藏图的尺寸。

为了解决这个问题，我想动态更新选项卡高度以等于默认选项卡的高度。像这样：选择选项卡时更改 div 高度。

问题是，我无法在 DOM 加载时选择选项卡高度值。我想我可以添加一个带有 evenlistener 的 componentDidMount 函数来进行窗口加载，如下所示：

    constructor(props) {
        super(props)
        this.state = {
            value: 0
        };
        this.handleLoad = this.handleLoad.bind(this);
    }

    componentDidMount() {
        window.addEventListener('load', this.handleLoad);
    }

    handleLoad() {
        console.log("firstTab height: " + $('#firstTab').offsetHeight)
    }

这个问题是，控制台日志正在输出 firstTab height: undefined。

当我检查网页并将命令 $('#firstTab').offsetHeight 放入控制台时，我能够得出 697 像素的高度。

我不想硬编码标签像素大小。谁能指导我为什么我无法在窗口加载时获取元素高度？

4

2 回答 2

0

我认为你可以做这样的事情，而不是使用事件监听器。

componentDidMount() {
    const height = this.firstTab.clientHeight;
    console.log(height) // => gives you height
}

render() {
    return (
      <div 
        id="firstTab"
        ref={ (firsTabElement) => { this.divElement = firstTabElement } }
      >
        Tab Content
      </div>
    )
  }

如果您没有隐藏或设置任何条件以从 DOM 中删除 firstTab，则在第一次渲染之后。它将在componentDidMount生命周期内提供给您。

于 2020-02-06T15:17:27.487 回答
0

尝试使用 clientHeight 属性。

componentDidMount() {
    const height = document.getElementById('firstTab').clientHeight;
}
于 2020-02-06T15:08:18.973 回答