React中使用三元运算符计算阅读时长结果异常求助

问题原因 #

你的代码里的三元表达式存在运算符优先级错误，导致计算逻辑完全偏离预期：

0.008 * text.length>0?text.trim().split(" ").length:0

这里会先执行0.008 * text.length，判断结果是否大于0，条件成立时直接返回text.trim().split(" ").length（原始单词数），根本没有执行乘以0.008的操作，所以才会显示1而不是0.008。

修正代码 #

把计算逻辑调整为：先判断文本是否有效，再将单词数乘以0.008：

<textarea className={` form-control text-${props.mode==='dark'?'light':'dark'} `} value={text} onChange={handleOnChange} id="myBox" rows={10} style={{backgroundColor: props.mode==='light'?'light':'dark'}}/>
                
<p className={` text-${props.mode==='dark'?'light':'dark'} my-1 `}>
  {text.length > 0 ? (text.trim().split(" ").length * 0.008) : 0} Minutes read 
</p>

额外优化（可选） #

如果文本中有多个连续空格，split(" ")会生成空字符串元素，导致单词数统计不准确。可以用正则表达式拆分并过滤空值：

text.trim().split(/\s+/).filter(word => word).length * 0.008

这样能更精准地统计实际单词数量。

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