reactjs - 如何在 React 中获取 ChildNode 的宽度？

Question

我正在使用 React 和 Typescript 构建一个选项卡轮播，其中每个选项卡都有不同的大小。我需要获取这些选项卡大小才能正确计算每个 View 中适合的选项卡数量。我如何在 React 中获取每个此类子节点的宽度？

我能够使用 ref 检索选项卡节点:

const tabs = tabsRef.current;
tabs.childNodes.forEach((tab: ChildNode) => {
    // I need the width of the tab here
});

我尝试使用 tab.clientWidth，但出现以下错误 Property 'clientWidth' does not exist on type 'ChildNode'。

然后我尝试了一个解决方法

tab.firstChild.parentElement.clientWidth;

但是，这会为没有子元素的元素抛出异常。还有其他方法可以实现吗？

Answer 1

ChildNode是一个 mixin，因此它不包含任何宽度属性，因为某些节点可能没有宽度(即 DocumentType)。但是，如果您知道子节点的类型，则可以使用 cast 来使 typescript 满意:

(tabs.childNodes as NodeListOf<HTMLDivElement>).forEach((tab: HTMLDivElement) => {

    console.log(tab.offsetWidth);
    console.log(tab.clientWidth);
})

如果您有多种元素类型，您可以全部定义它们:

const tabsChildren = tabs.childNodes as NodeListOf<HTMLDivElement | HTMLSpanElement | HTMLButtonElement>;

或者只使用 any 作为最后的解决方法:

const tabsChildren = tabs.childNodes as NodeListOf<any>;