Reactjs 如何阻止React中文本变化的跳跃

如何在react中顺利地从文本转换到svg。 当我点击图片中显示为“>”的下一步按钮时，文本变为svg。但是由于整体高度的变化，会出现某种跳跃。 我怎样才能在两者之间顺利过渡

注意：不幸的是，我不能分享代码，因为这不是个人隐私 项目

---

您可以将包含元素的高度设置为最高的元素。因此，您需要将它们放置在右边空白处为负数的一行中，以便它们相互重叠。隐藏具有可见性的其他图元时，仅显示使其可见的图元：隐藏

以下是一个例子：

var-elements=document.querySelectorAll（'.block__元素'）；
document.querySelector（'button'）。addEventListener（'click'，（）=>{
elements.forEach（element=>{
if（element.classList.contains（'block\u element--visible'））{
element.classList.remove（'block__元素--visible'）；
}否则{
元素.classList.add（'block__元素--visible'）；
}
})
});
.block{
背景：#aaa；
显示器：flex；
}
.block\u元素{
宽度：100%；
保证金权利：-100%；
可见性：隐藏；
不透明度：0；
过渡：能见度1s，不透明度1s；
}
.block\u元素--可见{
能见度：可见；
不透明度：1；
}

内容1
较长内容2
在元素之间切换
谢谢，我仍然需要在我的代码中实现这一点，但任何想法都是有用的。它奏效了。我不得不使用useref并做了一些更改，但想法与您提到的相同。因此接受这个答案。