使用React控制元素的高度

<div style={{ height: '200px', backgroundColor: 'lightblue' }}>
  Fixed Height Content
</div>

import React, { useState } from 'react';

function DynamicHeightComponent() {
  const [height, setHeight] = useState('100px');

  const toggleHeight = () => {
    setHeight(height === '100px' ? '200px' : '100px');
  };

  return (
    <div>
      <div style={{ height: height, backgroundColor: 'lightgreen' }}>
        Dynamic Height Content
      </div>
      <button onClick={toggleHeight}>Toggle Height</button>
    </div>
  );
}

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

function ResponsiveHeightComponent() {
  const [height, setHeight] = useState(window.innerHeight * 0.5);

  useEffect(() => {
    const handleResize = () => {
      setHeight(window.innerHeight * 0.5);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div style={{ height: `${height}px`, backgroundColor: 'lightcoral' }}>
      Responsive Height Content
    </div>
  );
}

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

function HeightControlledComponent() {
  const [height, setHeight] = useState('100px');

  useEffect(() => {
    const handleResize = () => {
      setHeight(`${window.innerHeight * 0.5}px`);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const toggleHeight = () => {
    setHeight(height === '100px' ? '200px' : '100px');
  };

  return (
    <div>
      <div style={{ height: height, backgroundColor: 'lightyellow' }}>
        Controlled Height Content
      </div>
      <button onClick={toggleHeight}>Toggle Height</button>
    </div>
  );
}

export default HeightControlledComponent;