如何更改React的宽度和高度-自动选择React-js

/* 在你的组件样式文件中 */
.myComponent {
  width: 300px;
  height: 200px;
}

import React from 'react';
import './MyComponent.css';

function MyComponent() {
  return <div className="myComponent">Hello World!</div>;
}

export default MyComponent;

import React from 'react';

function MyComponent() {
  const style = {
    width: '300px',
    height: '200px'
  };

  return <div style={style}>Hello World!</div>;
}

export default MyComponent;

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

function MyComponent() {
  const [dimensions, setDimensions] = useState({ width: 300, height: 200 });

  useEffect(() => {
    // 你可以在这里根据需要更新dimensions
  }, []);

  return <div style={{ width: `${dimensions.width}px`, height: `${dimensions.height}px` }}>Hello World!</div>;
}

export default MyComponent;

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

function MyComponent() {
  const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight });

  useEffect(() => {
    const handleResize = () => {
      setDimensions({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', handleResize);

    // 清除监听器
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <div style={{ width: `${dimensions.width}px`, height: `${dimensions.height}px` }}>Hello World!</div>;
}

export default MyComponent;

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

npm install

yarn install