![](/img/trans.png)
[英]How to integrate Javascript variable into ReactJS JSX style element
[英]Style proprety in JSX reactjs
我正在嘗試在名為 Gallery 的 reactjs 上實現,它在 html 上看起來像這樣:
<div class="grid-gallery" style="--grid-desktop:4; --grid-tablet:4; --grid-phone:4;
--grid-gap:var(--space-base); --grid-list-desktop:5; --grid-list-tablet:5; --grid-list-phone:5;">
<div data-container="" class="column-item-preview">1</div>
<div data-container="" class="column-item-preview">2</div>
<div data-container="" class="column-item-preview">3</div>
<div data-container="" class="column-item-preview">4</div>
<div data-container="" class="column-item-preview">5</div>
<div data-container="" class="column-item-preview">6</div>
<div data-container="" class="column-item-preview">7</div>
<div data-container="" class="column-item-preview">8</div>
</div>
樣式上的 css 類的數量幾乎沒有變化。 當我把它放在組件函數的返回中時,由於樣式參數,它不起作用。
如何將其“翻譯”為 JSX?
使用 className 而不是 class。 所以你的代碼看起來像 -
<div className="grid-gallery" style={{-gridDesktop: 4, -gridTablet: 4, -gridPhone: 4, -gridGap: 'var(--space-base)', -gridListDesktop: 5, -gridListTablet: 5, -gridListPhone: 5}}>
<div data-container className="column-item-preview">1</div>
<div data-container className="column-item-preview">2</div>
<div data-container className="column-item-preview">3</div>
<div data-container className="column-item-preview">4</div>
<div data-container className="column-item-preview">5</div>
<div data-container className="column-item-preview">6</div>
<div data-container className="column-item-preview">7</div>
<div data-container className="column-item-preview">8</div>
</div>
使用此語法。
<div class="grid-gallery" style="--grid-desktop:4; --grid-tablet:4; --grid-phone:4;
--grid-gap:var(--space-base); --grid-list-desktop:5; --grid-list-tablet:5; --grid-list-phone:5;">
<div data-container="" className="column-item-preview">1</div>
<div data-container="" className="column-item-preview">2</div>
<div data-container="" className="column-item-preview">3</div>
<div data-container="" className="column-item-preview">4</div>
<div data-container="" className="column-item-preview">5</div>
<div data-container="" className="column-item-preview">6</div>
<div data-container="" className="column-item-preview">7</div>
<div data-container="" className="column-item-preview">8</div>
</div>
這應該可以勝任
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.