React中如何仅对段落内的props.age数字值条件应用样式

你之前把动态颜色样式直接写在最外层<p>标签上，按照CSS样式继承规则，段落里的所有文本都会继承这个颜色属性，才会导致固定的"Age"文字也跟着变色。
要实现仅给后面的年龄数字单独设置条件颜色，只需要用行内标签<span>包裹年龄数值部分，再把条件判断的样式绑定到这个span上就行。<span>是原生行内元素，不会打断文本流，也不会破坏原有段落的排版结构。

修正后代码 #

<p>Age: <span style={{color: props.age >= 10 ? 'green' : 'orange'}}>{props.age}</span></p>

实现逻辑 #

• 固定文本Age:会沿用段落默认的文字颜色，完全不受条件样式影响
• 年龄数值会自动根据属性值切换颜色：当props.age大于等于10时显示绿色，否则显示橙色
  
• 小提示：这类行内局部样式的场景，优先用<span>包裹目标内容再单独绑定样式，不要把局部生效的样式直接挂在父级容器上，避免非目标内容继承到不需要的样式。

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