由于渲染计时，可以访问useref（）值
我是反应的新手。我也是在这个论坛上问问题的新手。
我有一个相当基本的两列布局，我正在尝试在RH列中动态设置图像大小，以匹配LH列的文本内容的高度。
我已经弄清楚我无法在页面渲染之前获得参考元素的滚动值，但是我不想渲染页面，直到我知道滚动值以呈现图像...我去。
如果我将console.log放入usefeffect（），但我不知道要适应它以帮助我解决特定问题，我可以获得ref'D值。
谁能帮助实现同样想法的解决方案或其他方法？
const tickList = useRef();
useEffect(() => {
console.log(tickList);
}, [])
<div className='ticklist-container' ref={tickList}>
<TickCrossList items={tickListItems} />
</div>
<div className='image-container p-1 flex flex-center'>
<img
src={imageUrl}
alt={imageAltText}
style={{ width: tickList.current.scrollHeight * 1.77 }}
/>
</div>
I am fairly new to React. I am also new to asking questions on this forum.
I have a pretty basic two column layout and I am trying to dynamically set the image size in the RH column to match the height of the text content of the LH column.
I have figured out I can't get the scrollHeight value of the ref'd element until the page is rendered but I don't want to render the page until I know the scrollHeight value to render the image...and around in circles I go.
I can get the ref'd value if I put a console.log inside a useEffect() but I don't know to adapt this to help me solve the specific problem.
Can anyone help with a solution or another method to achieve this same idea?
const tickList = useRef();
useEffect(() => {
console.log(tickList);
}, [])
<div className='ticklist-container' ref={tickList}>
<TickCrossList items={tickListItems} />
</div>
<div className='image-container p-1 flex flex-center'>
<img
src={imageUrl}
alt={imageAltText}
style={{ width: tickList.current.scrollHeight * 1.77 }}
/>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我相信这是一个XY问题。您正在问如何在技术上完成几乎不可能的任务（1）当您实际试图回答另一个问题时：如何使某些文本和图像并排看起来不错（2）（2）不是实际的编码问题 - 这是一个图形设计问题）。
最值得注意的是，您没有提供文本或图像，因此您要提供一个一般解决方案，在所有情况下都可以使用。该解决方案不存在。图片如果文本长1个字母，则结果如何，如果长2页长。
最后但并非最不重要的一点是，问题与反应并不严格。通常，您应该问自己：
更详细地...
（1）。当您更改图像大小时，只要保持其比率，就会影响该段落的宽度，导致其重新编写，更改其高度，并可能创建循环。在许多情况下，您需要多次重新运行脚本，直到调整图像高度时文本不再重写。
在调整事件大小的背景下（用户将平板电脑从景观翻转到肖像和背部）的上下文中，您会得到灾难的秘诀。
更不用说浏览器如今允许用户覆盖字体大小或字体家庭，从而控制可读性。您的脚本如何应对此更改？
（2）这个问题通常是解决的。
有一些不同的考虑因素：
您可能想避免使用一些不好的例子（但是您当前正在询问），然后对Y问题有一个可能的答案：
作为奖励，黄金比率可以为您做什么：
I believe this is, at core, an XY problem. You're asking how to technically achieve a nearly impossible task (1) when you're actually trying to answer another question: how to make some text and an image look good side by side (2) (which, by and large, is not an actual coding problem - it's a graphical design problem).
Most notably, you're not providing either the text or the image, so you're asking for a general solution, which would work in all cases. That solution doesn't exist. Picture how the result would look if the text was 1 letter long and how it would look if it was 2 pages long.
Last, but not least, the problem is not strictly related to React. In general, you should ask yourself:
In more detail...
(1). When you're changing the image size, provided you maintain its ratio, you're going to affect the paragraph's width, causing it to re-wrap, changing its height, potentially creating a loop. In many cases, you'd need to re-run the script multiple times until the text no longer re-wraps when adjusting the image height.
Picture all this in the context of resize events (a user flipping their tablet from landscape to portrait and back) and you got a recipe for disaster, UX-wise.
Not to mention browsers nowadays allow users to override font-size or font-family, giving control over readability. How would your script cope with this change?
(2) How this problem is typically solved.
There are a few distinct considerations:
A few bad examples you probably want to avoid (but you're currently asking for), followed by a possible answer to the Y problem:
As a bonus, what golden ratio can do for you: