ReactJSのBootstrapボタングループで条件付き小道具を作成する方法

Question

次のような useState があります:

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

そして、orderStandard の値に基づいて、小道具を与えたいと思います。

以下のコードは、ReactJS の BootStrap を使用した ButtonGroup です。

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

<ボタングループ
            スタイル={{
              身長: 35、
              表示: "フレックス"、
              justifyContent: "中央",
              alignItems: "中央",
            }}
          >
            <ボタン
              id="注文ボタン"
              バリアント = "ライト"
              スタイル={{ 幅: 80 }}
              アクティブ
              onClick={() => setOrderStandard("合計")}
            >

上記の Button の小道具のうち、active によりボタンが選択されます。

そこで以下の条件に設定しました。

しかし、エラーがスローされます。エラー メッセージ: '...'expected.ts(1005)

だから私は ...

を使います

<ボタン
                  id="注文ボタン"
                  バリアント = "ライト"
                  スタイル={{ 幅: 80 }}
                  {...(orderStandard == "合計" ? アクティブ : null)}
                  onClick={() => setOrderStandard("合計")}
                >

しかし、上記のコードを書くと、active プロパティが未定義であると表示されます。

どうすればできるでしょうか?

Answer 1

active を Button のプロパティとして使用するのではなく、変数として使用しようとしているため、「'active' is not Defined」というメッセージが表示されます。

＃＃＃これを試して＃＃＃

setOrderStandard("合計")} >