javascript - 我如何呈现条件样式(React + Sass)

Question

我的 scss 文件中有这些类:

.errorNotice {
  display: none;
  font-size: 12px;
  color: #D85B5F;
  background: white;
  padding: 5px;

  .error & {
    display: inline-block;
  }
}

在我的 render 函数中，

{this.state && this.state.error ?
     (
     <p className={styles.errorNotice + (this.state.error ? styles.error : '')}>{this.state.error}</p>
     ) :
     null
}

但这并没有给我想要的样式。它给了我一个奇怪的连接:

campaigns-components-WaitlistForm-styles_errorNotice-1X-Ty4campaigns-components-WaitlistForm-styles_error-JNXx2E

我的目标是使用正确的 display 属性显示 errorNotice。

谢谢

Answer 1

使用字符串文字来组合字符串。在类名中，您只需要类的名称。因此，使用 ` 你可以开始一个字符串文字，在 ${} 中你可以运行 javascript 代码并返回一些东西:

   <p className={`errorNotice ${this.state.error ? "error" : ''}`}>{this.state.error}</p>

也许您也可以选择查看样式化组件 ( https://www.styled-components.com )。恕我直言，对于 React 元素，这真的很好用，您不必再创建特殊的 css 文件或处理类名。