Question

我在JSX中具有以下内容，并且正在尝试获取元素的宽度：

sort()

由于某些原因，edit() { const width = document.getElementsByClassName('my-container').offsetWidth; console.log(width); return ( <Fragment> <div>Stuff...</div> <div className="my-container"> ... </div> <div>More stuff...</div> </Fragment> ) }返回width。我在做什么错了？

Answer 1

这是因为该元素尚未呈现并添加到DOM中。为此，您需要像这样使用»refs«：

render () {
  return (
    <div ref={node => node && console.log(node.offsetWidth)}
  );
}

感谢@Icepickle的评论：请记住，node可能为空，以防组件被删除。这可能是进行“清理”的机会。

您需要传递一个在创建节点并将其添加到dom后触发的函数。

在React中，dom元素首先是虚拟的，因此»real«Dom Node有点隐蔽。那就是使性能按原样做出反应的骨干之一，因为所有算法仅处理“简单JS对象”，没有完整的DOM节点。

要完全了解正在发生的事情，记住以下一行是很有帮助的：

const node = <div>;

将通过react babel插件转换为如下形式：

const node = React.createElement('div');

所以最后

render () {

  return <div />
}

将导致

render () {

  return React.createElement('div')
}

即使您愿意：

render () {
  const node = <div />;
  // that is a virtual react node, so you cannot query the
  // width here
  return node;
}

如果您走document.querySelector道路，则冒着风险要么根本没有节点（尚未创建），要么最终在节点被反应更新之前结束，所以您测量的宽度可能不会/不会成为你的追随者。使用refs可确保在应用所有修改后可以访问该节点。

Docs

Answer 2

这是不可能的，因为您正在调用my-container的那一刻所引用的DOM（edit）尚不存在。

如果在初始edit中调用了render，则可以在getElementByClassName中移动该componentDidMount调用。

如果调用edit作为对用户交互的响应（所以在之后 componentDidMount），则可以将getElementByClassName调用移至componentDidUpdate中。

我也建议您在此处使用ref（例如他的答案中描述的@philipp）。

JSX获取div元素的宽度

2 个答案: