React与Bootstrap下实现元素匹配更小元素高度的简洁方案咨询

方案1：利用Bootstrap内置Flex类（最简洁） #

你的父容器已经使用了row d-flex，Bootstrap的Flex容器默认会让子元素（col）高度自动拉伸匹配。如果mainElement高度未跟随secondaryElement，大概率是因为mainElement没有占满父容器高度，给它添加h-100类即可：

<div className='row text-primary d-flex'>
    <div className="col h-100" id="mainElement">...SOME TEXT..</div>
    <aside className="col overflow-auto" id="secondaryElement">...SOME IMAGES...</aside>
</div>

h-100会强制元素占满父容器高度，结合Flex布局的拉伸特性，无需任何JS就能实现高度匹配。如果仍不生效，检查mainElement内部子元素是否设置了固定高度或align-self类，这类属性会破坏Flex的拉伸逻辑。

方案2：改用CSS Grid布局 #

如果Flex布局存在冲突，可将父容器改为Grid布局——Grid默认会让同一行的列高度自动匹配最高元素，适配性更强：

// 自定义CSS
.row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等分，可按需调整比例 */
}

// JSX部分
<div className='row-grid text-primary'>
    <div className="col" id="mainElement">...SOME TEXT..</div>
    <aside className="col overflow-auto" id="secondaryElement">...SOME IMAGES...</aside>
</div>

方案3：React结合ResizeObserver（动态场景适配） #

如果secondaryElement高度会动态变化（比如图片加载完成后高度改变），上述CSS方案依然有效；若需精细控制，可使用React的useRef搭配ResizeObserver监听高度变化，比原生JS更简洁：

import { useRef, useEffect } from 'react';

function YourComponent() {
  const mainRef = useRef(null);
  const secondaryRef = useRef(null);

  useEffect(() => {
    if (!mainRef.current || !secondaryRef.current) return;

    const observer = new ResizeObserver(entries => {
      const secondaryHeight = entries[0].contentRect.height;
      mainRef.current.style.height = `${secondaryHeight}px`;
    });

    observer.observe(secondaryRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <div className='row text-primary d-flex'>
      <div className="col" ref={mainRef} id="mainElement">...SOME TEXT..</div>
      <aside className="col overflow-auto" ref={secondaryRef} id="secondaryElement">...SOME IMAGES...</aside>
    </div>
  );
}

这个方案会实时同步secondaryElement的高度变化，但仅在CSS方案无法满足特殊需求时使用，毕竟CSS方案更高效简洁。

内容的提问来源于stack exchange，提问作者dannkis