Question

我正在尝试从React组件获取高度和宽度，以用于调整图像大小的功能。

我在React应用程序中工作，我有一个名为Canvas的组件，该组件接收4个图像组件并通过屏幕将它们分布成一个正方形。

为此，现在，我创建了一个函数来调整这些图像的大小，以使其适合它们。

问题在于，现在这些图像的最大宽度和高度是使用当前屏幕的硬编码参数来计算的。

我需要知道此Canvas组件的宽度和高度，以便可以传递此参数并创建动态函数。

我尝试使用ID，引用，甚至尝试了CSS中的“ calc”功能，但我无法接收该信息...

调整大小功能

var resize = function (maxh, maxw, acth, actw) {
  const ratio = maxh / maxw;
  if (acth / actw > ratio) {
    // height is the problem
    if (acth > maxh) {
      actw = Math.round(actw * (maxh / acth));
      acth = maxh;
    }
  } else {
    // width is the problem
    if (actw > maxh) {
      acth = Math.round(acth * (maxw / actw));
      actw = maxw;
    }
  }
  return({ height: acth, width: actw });
};

export default resize;

我需要使用调整大小后的信息的组件

function EnhancementTaskItem(props) {
  const jsonId = props.jsonId
  const maxWidth = 900
  const maxHeight = 380
  const actualWidth = 1800
  const actualHeight = 760
  const size = resize(maxHeight, maxWidth, actualHeight, actualWidth)
  const image = `https://via.placeholder.com/${actualWidth}x${actualHeight}.png?text=${jsonId}+${props.method}`
  return (
    <Box style={{ margin: "1rem" }}>
      <Card>
        <CardActionArea >
          <CardMedia
            style={{ height: size.height, width: size.width }}
            image={image}
          />
        </CardActionArea>
      </Card>
    </Box>
  );
}

提取高度和宽度所需的组件

class EnhancementTask extends Component {
  render() {
    return (
      <Box display="flex" flexWrap="wrap" justifyContent="center" alignItems="center" minHeight='calc( 100vh - 8rem )'>
        <EnhancementTaskItem jsonId={json.id} method="photo" />
        <EnhancementTaskItem jsonId={json.id} method="document" />
        <EnhancementTaskItem jsonId={json.id} method="document w/ photo" />
        <EnhancementTaskItem jsonId={json.id} method="b/w" />
      </Box>
    );
  }
}

export default EnhancementTask;

如何从React组件中提取宽度和高度像素值

0 个答案: