如何确定 ReactJS 中组件的大小？

在 Web 开发中，需要了解组件的实际大小。在 ReactJS 中，可以通过以下几种方式来确定组件的大小：

1. 使用 CSS3 中的 calc 函数

可以通过使用 calc 函数来计算组件的实际大小。该函数可以计算不同单位之间的值，并将值赋予组件的 CSS 属性中。例如：

#my-component {
  width: calc(100% - 20px);
  height: calc(50vh - 50px);
}

其中，将组件的高度设置为视口高度 (viewport height，vh) 减去固定值 50px。

2. 使用 window.getComputedStyle 方法

可以通过使用 window.getComputedStyle 方法获取组件的实际大小。例如：

const myComponent = document.querySelector('#my-component');
const style = window.getComputedStyle(myComponent);

console.log('Width: ', style.width);
console.log('Height: ', style.height);

其中，获取的 Width 和 Height 值均为带单位的字符串。

3. 使用 React Refs

可以通过使用 React Refs 获取组件的实际大小。首先在组件中创建一个 Ref：

class MyComponent extends React.Component {
  myRef = React.createRef();
  
  render() {
    return <div ref={this.myRef}>My Component</div>;
  }
}

然后在组件的 componentDidMount 函数中获取 Ref 元素的实际大小：

class MyComponent extends React.Component {
  myRef = React.createRef();
  
  componentDidMount() {
    const height = this.myRef.current.clientHeight;
    const width = this.myRef.current.clientWidth;
    
    console.log('Width: ', width);
    console.log('Height: ', height);
  }
  
  render() {
    return <div ref={this.myRef}>My Component</div>;
  }
}

总结

在 ReactJS 中，可以通过使用 CSS3 中的 calc 函数、window.getComputedStyle 方法和 React Refs 来获取组件的实际大小。选择相应的方法取决于具体的需求和应用场景。