Cara membuat prop bersyarat dalam kumpulan butang Bootstrap dalam ReactJS

Question

Saya ada useState seperti berikut:

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

Dan berdasarkan nilai orderStandard, saya ingin memberikan props.

Kod di bawah ialah BootStrap dengan ReactJSButtonGroup.

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")}
            >

Di atas, antara prop Button, active menjadikan butang dipilih.

Jadi saya tetapkan sebagai syarat berikut.

Tetapi ia menimbulkan ralat. Mesej ralat: '...'预期.ts(1005)

Jadi saya guna ...

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

Tetapi apabila saya menulis kod di atas, ia berkata active props tidak ditentukan.

Bagaimana saya boleh melakukannya?

Answer 1

Anda menerima 'active' is not Defined 因为您尝试使用 active 作为变量，而不是将其用作 Button atribut.

Cuba ini

  setOrderStandard("total")}
 >