Question

我正在使用ReactJS构建页面预加载器。我使用的Codepen代码段是用HTML编写的，我需要帮助将其转换为HTML，以备React使用。

部分代码

<div class="socket">
  <div class="gel center-gel">
    <div class="hex-brick h1"></div>
    <div class="hex-brick h2"></div>
    <div class="hex-brick h3"></div>
  </div>
</div>

转换为React

<div className={s.socket}>
  <div className={s.gel s.center-gel}>
    <div className={s.hex_brick s.h1}></div>
    <div className={s.hex_brick s.h2}></div>
    <div className={s.hex_brick s.h3}></div>
  </div>
</div>

所以我用下划线替换连字符，用大括号代替引号，并在类中添加了Name。但是，我不知道如何添加第二个div修饰符（例如在div凝胶中有元素中心凝胶）。当第二个元素添加到React div时，它无法编译。

React不允许这些第二个div元素。测试后，如果我分离出元素，我的加载动画看起来不正确，结构需要保持不变。

Snippet Used

Answer 1

当您在React中编写JSX代码时，您实际上正在编写JavaScript代码。我们假设您将这些表达式放入变量中，如下所示：

var styles = s.gel s.center-gel;

它在JS中没有任何意义。你需要写一个这样的有效表达式：

var styles = [s.gel, s['center-gel']].join(' ');

记住这一点，您的代码应该以这种方式工作：

<div className={s.socket}>
    <div className={[s.gel, s['center-gel']].join(' ')}>
        <div className={[s.hex_brick, s.h1].join(' ')}></div>
        <div className={[s.hex_brick, s.h2].join(' ')}></div>
        <div className={[s.hex_brick, s.h3].join(' ')}></div>
    </div>
</div>

在ReactJS中添加div元素

1 个答案: