React Native视图中基于百分比计算的内联条件判断实现问题

问题原因 #

现有代码无法运行的核心问题是组件内的语法错误：你错误地用+拼接静态文本和JS表达式，React Native的组件会自动合并内部的相邻文本内容，不需要额外加号。其次你的三元判断逻辑存在重复计算的冗余问题，可以进一步优化。

修复方案 #

推荐使用Math.min()方法实现需求，逻辑更简洁，无需冗余的条件判断：

<View>
  <Text>
    sometext
    {Math.min(103 * 50 / 100, 30)}
  </Text>
</View>

该方法会直接返回计算结果和30的较小值，完全匹配你「计算结果大于30时返回30，否则返回百分比值」的需求。

如果你希望保留三元判断的写法，建议提前计算百分比值避免重复计算：

// 提前计算百分比值
const calculatePercent = (base, ratio) => base * ratio / 100;
const percent = calculatePercent(103, 50);

// 组件渲染部分
<View>
  <Text>
    sometext
    {percent > 30 ? 30 : percent}
  </Text>
</View>

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