如何使用三元运算符根据valuePro值渲染不同的Button组件

你现有代码的核心错误有两个：

• 三元运算符的两个返回分支不需要额外套一层{}，JSX里只有嵌入JS表达式的时候才需要用{}包裹，你已经在外层写了顶层的{}包裹整个三元表达式，内部分支直接返回JSX结构即可
• 单个JSX表达式不能直接返回多个并列的根元素，需要用Fragment包裹来做无额外DOM节点的容器

正确实现代码如下：

{valuePro ? (
  <>
    <Button
      className="proButton"
      secondary
      onClick={triggerFileSelectPopup}
      style={{ marginRight: "10px", zIndex: isVisible ? 6 : 1, marginBottom: "8px" }}
    >
      Change
    </Button>
    <Button
      className="proButton"
      onClick={onDownload}
      style={{ marginRight: "10px", zIndex: isVisible ? 6 : 1, marginBottom: "8px" }}
    >
      Confirm
    </Button>
  </>
) : (
  <>
    <GenericButton
      secondary
      onClick={triggerFileSelectPopup}
      style={{ marginRight: "10px", zIndex: isVisible ? 6 : 1, marginBottom: "8px" }}
    >
      Change
    </GenericButton>
    <GenericButton
      onClick={onDownload}
      style={{ marginRight: "10px", zIndex: isVisible ? 6 : 1, marginBottom: "8px" }}
    >
      Confirm
    </GenericButton>
  </>
)}

如果你的项目不支持Fragment短语法<>...</>，替换为<React.Fragment>...</React.Fragment>即可。

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