react获取dom的宽高不同展示不同的样子

你可以使用React的`useState`钩子来存储DOM元素的宽高，并使用`useEffect`钩子来监听DOM元素的变化。

下面是一个示例代码：

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

function MyComponent() {
  const myRef = useRef(null);
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  useEffect(() => {
    const rect = myRef.current.getBoundingClientRect();
    setWidth(rect.width);
    setHeight(rect.height);
  }, []);

  return (
    <div ref={myRef}>
      {width > height ? (
        <div style={{ width: '100%', height: '50px', backgroundColor: 'red' }}>Landscape</div>
      ) : (
        <div style={{ width: '50px', height: '100%', backgroundColor: 'blue' }}>Portrait</div>
      )}
    </div>
  );
}

在上面的代码中，我们使用`useRef`钩子创建了一个`myRef`引用并将其分配给外部`<div>`元素的`ref`属性。然后，我们使用`useState`钩子创建了`width`和`height`状态变量，并将其初始值设为0。

接下来，我们使用`useEffect`钩子来监听DOM元素的变化。在第二个参数中传入一个空数组，表示只在组件挂载时执行一次。在回调函数中，我们使用`getBoundingClientRect()`方法获取DOM元素的宽高，并将其分别设置为`width`和`height`状态变量的值。

最后，我们根据`width`和`height`的值来展示不同的样式。如果宽度大于高度，则展示横向的红色`<div>`，否则展示纵向的蓝色`<div>`。