在react中，如何缩放父组件，使其所有子组件按比例缩放

Question

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

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

如何轻松实现这一点?

Answer 1

如果它们是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 />

好了，通过使用比例变量来动态改变比例的值，你可以很容易地实现你想要的!

---

现在，有几个问题:

假设这段代码在理论上工作我不能说它会为你工作，因为你没有提供任何代码在你的问题。这很糟糕，请确保从现在开始提供代码。这只是为了你自己好，这样我们可以为你的问题写出更好的答案。