React render方法中如何动态修改部分文本并设置样式

错误根因 #

你代码出现[object Object]的核心原因是：

• JSX中<div>这类标签是React.createElement的语法糖，执行后返回的是JS对象，不是普通字符串
• 你用+运算符把字符串（Completed: ）和React元素对象拼接，JS会自动调用对象的toString()方法，最终就输出了[object Object]
• 额外问题：div是块级元素，就算拼接成功也会和前面的文本分成两行，不符合原有排版需求

解决方案 #

直接拆分前后两部分渲染即可，不需要用+拼接：

render() {
    return(
        <div className={container}>
            {/* 条件渲染前缀文本 */}
            {this.conditionOne ? 'Completed: ' : ''}
            {/* 用行内元素span包裹百分比，动态绑定样式类 */}
            <span className={this.conditionTwo? 'conditionTwoDiv' : ''}>
                {this.completedValue + '%'}
            </span>
        </div>
    )
}

对应的CSS部分只需要在conditionTwoDiv类里定义你需要的颜色即可，示例：

.conditionTwoDiv {
  color: #f5222d; /* 替换为你需要的颜色值 */
}

实现原理 #

1. JSX支持多个相邻的文本、元素直接按顺序书写，React会自动按顺序渲染，不需要额外拼接操作，避免了对象转字符串的问题
2. span是行内元素，默认和前方文本在同一行展示，不会破坏原有排版
3. 样式类仅绑定在包裹百分比的span上，只会修改后半部分文本的样式，完全不会影响前方的前缀文本，也不需要写复杂的嵌套条件

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