解决移动端h5开发aspect-ratio兼容性的react组件

在移动端webview开发h5页面在有些设备会出现css属性aspect-ratio失效问题，造成排版布局错乱，使用此组件可以在很小的程度上改动代码做到兼容

import React, { FC } from 'react';
import { css, cx } from '@emotion/css';

interface Props {
  aspectRatio: number;
  width: React.CSSProperties['width'];
  onClick?: () => void | Promise<void>;
}

export const AspectRatio: FC<React.PropsWithChildren<Props>> = ({
  aspectRatio, width, children, onClick,
}) => {
  if (!aspectRatio) {
    return children;
  }
  return (
    <div
      style={{ width }}
      className={cx(css`height: 0;padding-top: ${(1 / aspectRatio) * 100}%;position: relative;`)}
      onClick={onClick}
    >
      <div className={cx(css`position: absolute;top: 0;left: 0;width: 100%;height: 100%`)}>
        {children}
      </div>
    </div>
  );
};