如何在React三元运算符中拼接字符串与HTML标签？

问题原因 #

你用+运算符拼接字符串和JSX元素时触发了隐式类型转换：<span>see more...</span>本质是React.createElement执行后返回的JS对象，字符串和对象相加会自动把对象转为[object Object]字符串，所以出现了不符合预期的输出。

正确写法 #

JSX中不需要用加号拼接文本和元素，直接并列放置即可，可以用React Fragment（短语法<>/</>）包裹多个并列内容，修改后的代码如下：

return <span>
    {
        data.length > 136
            ? <>
                {this.trimStringLength(data, 136)}
                <span>see more...</span>
              </>
            : data
    }
</span>;

如果不需要给"see more..."单独加样式，也可以直接把文本和裁剪后的内容拼接，不需要额外写span元素：

return <span>
    {
        data.length > 136
            ? `${this.trimStringLength(data, 136)} see more...`
            : data
    }
</span>;

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