如何在 React JS 中设置动态大小

在 React JS 中设置动态大小通常是根据组件的状态来设置的。以下是一些方法来实现动态大小：

1. 使用CSS样式

可以通过CSS来设置动态大小。使用CSS变量并在组件状态更改时更新变量，以反映新大小。以下是一个示例：

import React, { useState } from 'react';

const DynamicSizeButton = () => {
  const [size, setSize] = useState('100px');

  const handleButtonClick = () => {
    setSize('200px');
  }

  return (
    <button style={{ '--button-size': size }}>
      Click Me!
    </button>
  );
}

export default DynamicSizeButton;

在组件中使用带有 -- 前缀的 CSS 变量，然后在 style 属性中将大小设置为变量名称。在此示例中，变量名为 --button-size，并且初始大小设置为 100px。在 handleButtonClick() 函数中将变量值更改为 200px。

2. 动态计算大小

可以通过动态计算组件的大小来设置动态大小。可以使用 useRef 来获取组件的实例并测量其大小。以下是一个示例：

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

const DynamicSizeContainer = () => {
  const containerRef = useRef();
  const [size, setSize] = useState(0);

  useEffect(() => {
    setSize(containerRef.current.clientWidth);
  }, []);

  return (
    <div ref={containerRef} style={{ width: '50%' }}>
      <p>The container is {size}px wide.</p>
    </div>
  );
}

export default DynamicSizeContainer;

在此示例中，使用 useRef 获取对容器的引用。在 useEffect 中使用 clientWidth 属性来测量容器的宽度，并将宽度设置为状态值。容器的宽度在 DIV 元素的 style 属性中设置为 50%。

3. 使用窗口大小

可以使用窗口大小来设置动态大小。可以通过监听窗口变化，并根据新窗口大小更新组件大小。以下是一个示例：

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

const DynamicSizeDiv = () => {
  const [width, setWidth] = useState(window.innerWidth);

  const handleResize = () => {
    setWidth(window.innerWidth);
  }

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

  return (
    <div style={{ width: width }}>
      <p>The container is {width}px wide.</p>
    </div>
  );
}

export default DynamicSizeDiv;

在此示例中，初始宽度设置为 window.innerWidth。在 useEffect 中添加一个事件监听器来监听窗口大小变化，并在大小更改时更新状态。最后将宽度值设置为 DIV 元素的 style 属性中。

以上是几种在 React JS 中设置动态大小的方法。可以根据实际情况选择最适合的方法。