ReactJS使用BlueprintJS Button渲染出现[object Object]问题求助

BlueprintJS的Button组件text属性只接受字符串类型。你修改后的代码里，把<span>这个JSX元素和"| "字符串拼接，而JSX本质是React创建的对象，对象与字符串相加会被强制转换为[object Object]，这就是渲染异常的原因。

放弃使用text属性，直接给Button传递children，children支持混合的文本与JSX元素：

<Button>
  {`${user.name} (${user.invoicesCount?.unresolved ?? 0})`}
  {user.resolvingUsers.length > 0 && (
    <>
      {" | "}
      <span className="your-custom-style">
        {user.resolvingUsers.map((u: any) => u.name).join(", ")}
      </span>
    </>
  )}
</Button>

• 用&&替代冗余的三元表达式空分支，写法更简洁
• 用React片段<>包裹文本与span，避免生成多余DOM节点
• 给span添加自定义类名即可实现你需要的样式

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