ReactJS/CSS:如何根据其他元素高度设置div高度？

在ReactJS中，如果你想要根据其他元素的高度来设置一个div的高度，你可以使用多种方法来实现这一点。以下是一些常见的方法：

方法一：使用Ref和useEffect Hook

你可以使用React的ref来获取元素的实际高度，并在组件挂载后使用useEffect来设置另一个div的高度。

import React, { useRef, useEffect } from 'react';

function App() {
  const referenceDivRef = useRef(null);
  const targetDivRef = useRef(null);

  useEffect(() => {
    if (referenceDivRef.current && targetDivRef.current) {
      targetDivRef.current.style.height = `${referenceDivRef.current.clientHeight}px`;
    }
  }, []);

  return (
    <div>
      <div ref={referenceDivRef} style={{ height: '200px', backgroundColor: 'lightblue' }}>
        Reference Div
      </div>
      <div ref={targetDivRef} style={{ backgroundColor: 'lightgreen' }}>
        Target Div
      </div>
    </div>
  );
}

export default App;

方法二：使用CSS的Flexbox布局

如果你使用的是Flexbox布局，你可以设置父容器为display: flex和flex-direction: column，然后给目标div设置flex: 1，这样它会自动填充剩余的空间。

import React from 'react';

function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <div style={{ height: '200px', backgroundColor: 'lightblue' }}>
        Reference Div
      </div>
      <div style={{ flex: 1, backgroundColor: 'lightgreen' }}>
        Target Div
      </div>
    </div>
  );
}

export default App;

方法三：使用CSS的Grid布局

同样，你也可以使用CSS Grid布局来实现这一点，通过设置grid-template-rows属性来分配空间。

import React from 'react';

function App() {
  return (
    <div style={{ display: 'grid', gridTemplateRows: '200px 1fr', height: '100vh' }}>
      <div style={{ backgroundColor: 'lightblue' }}>
        Reference Div
      </div>
      <div style={{ backgroundColor: 'lightgreen' }}>
        Target Div
      </div>
    </div>
  );
}

export default App;

方法四：使用ResizeObserver API

如果你需要响应式地根据元素高度变化来调整另一个元素的高度，你可以使用ResizeObserver API。

import React, { useRef, useEffect } from 'react';

function App() {
  const referenceDivRef = useRef(null);
  const targetDivRef = useRef(null);

  useEffect(() => {
    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        if (entry.target === referenceDivRef.current && targetDivRef.current) {
          targetDivRef.current.style.height = `${entry.contentRect.height}px`;
        }
      }
    });

    if (referenceDivRef.current) {
      resizeObserver.observe(referenceDivRef.current);
    }

    return () => {
      resizeObserver.disconnect();
    };
  }, []);

  return (
    <div>
      <div ref={referenceDivRef} style={{ height: '200px', backgroundColor: 'lightblue' }}>
        Reference Div
      </div>
      <div ref={targetDivRef} style={{ backgroundColor: 'lightgreen' }}>
        Target Div
      </div>
    </div>
  );
}

export default App;