时间戳

首页 > 解决方案 > 在反应中，如何缩放父组件，使其所有子组件按比例缩放

javascript - 在反应中，如何缩放父组件，使其所有子组件按比例缩放

问题描述

<Parent style={{transform: "scale(2)"}}>
  <Child_1 />
  <Child_2 />
  <Child_3 />
  <Child_4 />
<Parent />

目标是让 Child_X 按比例缩放，它们之间的间距按比例缩放。

这怎么能轻松实现？

标签： javascripthtmlcssreactjs

解决方案

如果它们是 div，您可以使用它们的宽度。

1.首先找到父元素的宽度：

document.getElementById("parentElement").offsetWidth
注意：这只是一个示例，因为您没有提供这些 div 的代码，因此您可能需要相应地进行一些更改。

在这里，我们找到了父元素的宽度。

2.求子元素的宽度：

document.getElementById("childElement").offsetWidth

在这里，我们找到了子元素的宽度。

3. 求比例：

let parentWidth = document.getElementById("parentElement").offsetWidth;
let childWidth = document.getElementById("childElement").offsetWidth;
let proportion = childWidth / parentWidth;

在这里，我们将子元素宽度除以父元素宽度，以便我们可以得到我们必须调整元素大小的比例。

4.使用scale()属性：

let parentWidth = document.getElementById("parentElement").offsetWidth;
let childWidth = document.getElementById("childElement").offsetWidth;
let proportion = childWidth / parentWidth;
<Parent style={{transform: "scale(2)"}}>
  <Child_1 style={{transform: {`scale(${2 * proportion})`}}}/>
  <Child_2 style={{transform: {`scale(${2 * proportion})`}}}/>
  <Child_3 style={{transform: {`scale(${2 * proportion})`}}}/>
  <Child_4 style={{transform: {`scale(${2 * proportion})`}}}/>
<Parent />

到这里，通过使用比例变量来动态改变刻度的值，你可以轻松实现你想要的！

现在，有几个问题：

鉴于此代码在理论上有效，我不能说它对您有效，因为您没有在问题中提供任何代码。这很糟糕，请确保从现在开始提供代码。这只是为了您自己好，以便我们可以为您的问题写出更好的答案。

推荐阅读