比较两个div的高度

Question

我有一个对象列表

testList

，想比较

innerRef

和

outerRef

之间的 offsetHeight 差异。

我不知道为什么无论

outerRef offsetHeight

的长度有多长，

innerRef offsetHeight

值总是小于

{item.remark}

值

到目前为止，这是我的代码：

<div ref={outerRef}>
  {testList.map(({item, index}) =>
      return (
         <div>
            <span ref={this.innerRef}
                {item.remark} 
            </span> 
         </div>  
             ));
  }
</div>

在componentDidUpdate中，我比较了两个ref的

offsetHeight

if(this.outerRef.current.offsetHeight < this.innerRef.current.offsetHeight){
   this.setState({overflow: true});
else{
  this.setState({overflow: false});
}

Answer 1

您采取的方法取决于您的意图。

如果您尝试将外部容器的高度与作为内部元素的单个列表项的高度进行比较，那么您可以保留现有逻辑。在这种情况下，一旦任何单个列表项的高度超过外部容器的高度，溢出状态将被设置为 true：

    function App() {
  const testList = [
    { item: 'Item 1', remark: 'Remark 1' },
    { item: 'Item 2', remaek: 'Remark 2'}
  ];

  const outerRef = useRef(null);
  const innerRef = useRef(null);
  const [overflow, setOverflow] = useState(false);

  useEffect(() => {
    if (outerRef.current && innerRef.current) {
      if (outerRef.current.offsetHeight < innerRef.current.offsetHeight) setOverflow(true);
      else setOverflow(false);
      console.log(`Overflow: ${overflow}`); 
    }
  }, [testList]); 

  return (
    <div className="App">
      <header className='App-header'>
      <div ref={outerRef} style={{ maxHeight: '100px', backgroundColor: 'black'}}>
          {testList.map(({ item, remark }, index) => (
            <div key={index}>
              <span ref={innerRef}>
                {remark}
              </span>
            </div>
          ))}
        </div>
      </header>
    </div>
  );
}

另一方面，如果您的目标是

确定所有列表项的总高度是否超过外部容器的高度

，则需要更改逻辑。不要与单个内部元素进行比较，而是计算所有内部元素的总高度，然后将其与外部容器的高度进行比较：

const outerRef = useRef(null);
  const [overflow, setOverflow] = useState(false);

  useEffect(() => {
    if (outerRef.current) {
      const totalInnerHeight = Array.from(outerRef.current.children).reduce((acc, child) => {
        return acc + child.offsetHeight;
      }, 0);
      if (outerRef.current.offsetHeight < totalInnerHeight) setOverflow(true);
      else setOverflow(false);
    }
  }, [testList]);
  console.log(`Overflow: ${overflow}`);

  return (
    <div className="App">
      <header className='App-header'>
        <div ref={outerRef} style={{ maxHeight: '100px', backgroundColor: 'black' }}>
          {testList.map(({ item, remark }, index) => (
            <div key={index}>
              <span>
                {remark}
              </span>
            </div>
          ))}
        </div>
      </header>
    </div>
  );