[英]Style proprety in JSX reactjs
I'm trying to implement on reactjs called Gallery which look like this on html:我正在尝试在名为 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>
And few changes are applied on the numbers of the css classes on styles.样式上的 css 类的数量几乎没有变化。 When I put this in the return of the component's function it's not working because of style parameter.
当我把它放在组件函数的返回中时,由于样式参数,它不起作用。
How can I "translate" this to JSX?如何将其“翻译”为 JSX?
Use className instead of class.使用 className 而不是 class。 So your code will look like-
所以你的代码看起来像 -
<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>
Use this syntax.使用此语法。
<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>
This should do the job这应该可以胜任
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.