React中不使用jQuery，如何简洁实现两个div数值求和？

嗨，很高兴帮你梳理这个问题～首先明确说：完全不需要用jQuery，甚至连useRef都没必要——因为你要相加的数值已经存在details这个state里了，直接基于state数据计算才是最简洁优雅的React式解决方案。

为什么不用useRef？ #

useRef的核心场景是获取DOM元素、保存不需要触发重渲染的变量，而你的温度数据已经通过API存在state中了，绕去DOM里取值反而多此一举，还会引入依赖DOM的风险（比如DOM未加载完成时取值失败），完全不符合React的数据流理念。

最优解决方案（两种方式，按需选择） #

方式1：直接在JSX中计算（最直接） #

利用React的JSX语法，直接基于state数据做计算，同时加上空值判断避免初始加载时的报错：

{/* 示例：相加Morning和Day的温度 */}
<div className="detail--icon">
  Morning + Day: {Math.round(details.daily?.[1]?.temp?.morn || 0) + Math.round(details.daily?.[1]?.temp?.day || 0)}°c
</div>

• details.daily?.[1]?.temp?.morn：用可选链操作符?.处理初始details为空对象的情况，避免报错
• || 0：当数值不存在时用0兜底，防止出现NaN

方式2：提前计算变量（更清晰，适合复杂场景） #

如果需要多次使用相加后的结果，或者计算逻辑更复杂，可以在组件内部提前计算好：

// 组件内部，在return之前计算
const morningTemp = Math.round(details.daily?.[1]?.temp?.morn || 0);
const dayTemp = Math.round(details.daily?.[1]?.temp?.day || 0);
const combinedTemp = morningTemp + dayTemp;

// 然后在JSX中直接使用变量
<div className="detail--icon">Morning: {morningTemp}°c</div>
<div className="detail--icon">Day: {dayTemp}°c</div>
<div className="detail--icon">Morning + Day: {combinedTemp}°c</div>

（不推荐）如果非要用useRef的实现方式 #

虽然完全没必要，但还是给你演示一下，理解useRef的用法边界：

import { useState, useRef, useEffect } from 'react';

// 定义ref
const morningRef = useRef(null);
const dayRef = useRef(null);
const [combinedTemp, setCombinedTemp] = useState(0);

// 确保DOM渲染完成后再取值
useEffect(() => {
  if (morningRef.current && dayRef.current) {
    // 提取文本中的数字
    const morningVal = parseInt(morningRef.current.textContent.replace(/[^0-9]/g, ''), 10) || 0;
    const dayVal = parseInt(dayRef.current.textContent.replace(/[^0-9]/g, ''), 10) || 0;
    setCombinedTemp(morningVal + dayVal);
  }
}, [details]); // 依赖details，数据更新时重新计算

// JSX中绑定ref
<div ref={morningRef} className="detail--icon">Morning: {Math.round(details.daily?.[1]?.temp?.morn || 0)}°c</div>
<div ref={dayRef} className="detail--icon">Day: {Math.round(details.daily?.[1]?.temp?.day || 0)}°c</div>
<div className="detail--icon">Morning + Day: {combinedTemp}°c</div>

这种方式需要处理DOM提取、空值判断，比直接用state数据麻烦得多，所以强烈不推荐。

总结一下：直接基于state中的原始数据做计算，是最简洁、符合React设计思路的方案，完全不需要额外工具或API。

内容的提问来源于stack exchange，提问作者MrVoland