检测元素进入 Flex-wrap 容器中下一个轴的时刻

Question

我有一个类似于以下代码的代码，我将其作为一个简单的示例来表示问题。 React 组件代码：

import { useState, useRef, useEffect, useCallback } from 'react'
import './App.css'

function Some_long_array(len: number) {
  let array = [];
  for (let i = 0; i < len; i++) array.push('array');
  return array;
}

function App() {
  const [array, Set_array] = useState(() => Some_long_array(50));
  const wrap_box_ref = useRef<HTMLDivElement>(null)
  const current_word_ref = useRef<Element | null>(null);
  const current_word_index = useRef(0);

  const Handle_advance = useCallback(() => {
    if (current_word_index.current + 1 >= array.length) return;
    current_word_ref.current!.classList.remove('some_class');
    current_word_index.current++;
    current_word_ref.current = wrap_box_ref.current!.children[current_word_index.current]
    current_word_ref.current.classList.add('some_class');
  }, [array]);

  useEffect(() => {
    if (!wrap_box_ref.current) return;
    current_word_ref.current = wrap_box_ref.current.children[current_word_index.current];
    current_word_ref.current.classList.add('some_class');
  }, []) 

  return (
    <>
      <div id='wrap_box' ref={wrap_box_ref}>
        {
          array.map((el, index) => 
            <div className='word' key={el + index.toString()}>
              {el}
            </div>
          )
        }
      </div>
      <button style={{padding: 10}} onClick={Handle_advance}>
        Click me to advance to next word!
      </button>
    </>
  )
}

export default App

CSS：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#wrap_box{
  display: flex;
  align-items: center;
  justify-content: space-between; /* This might change to 'flex-start'. */
  flex-wrap: wrap;
  gap: 10px;
  font-size: 2em;
}
.word{
  display: inline;
}
.some_class{
  background-color: pink;
}

在此代码中，我遍历 Flex 容器，并将

flex-wrap

属性设置为

wrap

，并直接操作引用以将样式动态应用到“当前单词”。在我的实际代码中，我只想始终显示三行单词。为此，我需要一个可以修改数组的函数：它将删除代表第一行的第一个

N

单词，并相应地修改索引和 ref （来自 useRef）（考虑当前视口宽度）；另一个函数稍后会将单词添加到数组中。为了了解从一开始我需要删除多少个元素（我提到的数字

N

），我需要以某种方式找出行中最后一个单词的索引。这样，当单击按钮并且行中的最后一个单词是“当前”（在上面的示例中 - 用粉红色突出显示（如果您运行该项目，您会看到它））时，我需要执行该函数。如何检测 ref 将转到位于 flex-container 下一行的元素的时刻？不依赖 CSS 属性值的最佳方法是什么？

我尝试的第一件事是在

getBoundingClientRect()

和

wrap_box_ref

容器上使用

current_word_ref

方法的组合来计算返回对象的

right

值的差异。如果差异为 0，那么我可以说

current_word_ref

div 排在最后。我不喜欢这种方法，因为它高度依赖于

justify-content: space-between

容器上设置的

wrap_box

属性值对。例如，如果我稍后想将其更改为

flex-start

，则代码将会损坏。 您有什么想法如何识别柔性行中的最后一个单词吗？

Answer 1

在这篇文章中找到解决方案：检测哪个元素 flex-wrap 影响。 使用 getBoundingClientRect() 发现当前单词和下一个单词之间“顶部”的差异，并由此获得最后一个单词的索引。