JSX反应js中的样式属性答案

【问题标题】：Style proprety in JSX reactjsJSX反应js中的样式属性
【发布时间】：2020-05-09 18:12:10
【问题描述】：

我正在尝试在名为 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？

【问题讨论】：

阅读文档：reactjs.org/docs/dom-elements.html#style, reactjs.org/docs/faq-styling.html

标签： javascript html reactjs jsx

【解决方案1】：

使用类名而不是类。所以你的代码看起来像-

【讨论】：

【解决方案2】：

 <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>

使用这种语法。

【讨论】：

【解决方案3】：

    <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>

这应该可以完成工作

【讨论】：