如何在 ReactJS 的 Bootstrap 按鈕組中製作條件道具

Question

我有 useState 如下：

const [orderStandard, setOrderStandard] = useState("total");

並且根據orderStandard的值，我想給出props。

下面的程式碼是ReactJS的BootStrap的ButtonGroup。

https://react-bootstrap.github.io/components/button-group/#button-toolbar-props

<ButtonGroup
            style={{
              height: 35,
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Button
              id="order-button"
              variant="light"
              style={{ width: 80 }}
              active
              onClick={() => setOrderStandard("total")}
            >

上面，Button 的 props 中，active 使按鈕被選取。

所以我將其設為以下條件。

但是它會拋出錯誤。錯誤提示：'...'預期.ts(1005)

#所以我用 ...

#<Button
                  id="order-button"
                  variant="light"
                  style={{ width: 80 }}
                  {...(orderStandard == "total" ? active : null)}
                  onClick={() => setOrderStandard("total")}
                >

但是當我在上面編寫程式碼時，它說 active props 未定義。

我怎麼做？

Answer 1

您收到 'active' is not Defined 因為您嘗試使用 active 作為變量，而不是將其用作 Button 的屬性。

試試這個

  setOrderStandard("total")}
 >