ReactJS/CSS:如何根据其他元素高度设置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;

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;

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;

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;