内联样式纵横比在 React 中不起作用

Question

这是 React 内联样式的问题吗？ 我有一个裁剪组件，我想根据传入图片的纵横比更改裁剪视图。

当我将变量传递给 Crop 时：

<Crop width={"200"} height={"100"}

我的Crop.js组件中有：

<div style={{aspectRatio: `calc(${width}px / ${height}px)` }}>
</div>

但变化不显示。 但是，当我用整数（即 1/2）编写常规纵横比时，它确实发生了变化。 有没有办法按照我尝试的方式完成此操作？ 它将帮助我处理多个组件。

Answer 1

aspectRatio期望一个<ratio>类型的值，而你给它一个calc 。 下面的例子有效：

export default function App() {
  const width = 200;
  const height = 60;
  return (
    <div
      style={{
        aspectRatio: width / height,
        background: "red"
      }}
    ></div>
  );
}

此外，将它们作为数字而不是字符串传递：

<Crop width={200} height={100}