如何基於條件將屬性應用或不應用於 jsx 元素

Question

我有這個元素：

<div id="app-wrapper" style={{"grid-template-columns": "50% 50%"}}>..</div>

我想根據組件狀態中定義的條件將樣式屬性更改為：

<div id="app-wrapper" style={{"grid-template-columns": "100%"}}>..</div>

Answer 1

您可以通過兩種方式使用三元運算符有條件地呈現樣式：

選項1：

<div id="app-wrapper" style={state? {"grid-template-columns": "50% 50%"} : {"grid-template-columns": "100%"}}>..</div>

選項 2（更清潔）：

const divStyle = state? {"grid-template-columns": "50% 50%"} : {"grid-template-columns": "100%"}


<div id="app-wrapper" style={divStyle}>..</div>

Answer 2

您喜歡使用三元運算符：

<div id="app-wrapper" style={{"grid-template-columns": condition?"100%":"50% 50%"}}>..</div>