0

我正在做 react 并有一个使用 CSS 模块进行样式设置的元素，如下所示：

<div className={styles.book__title}>Title: {book.title}</div>

因为类名是散列的，所以编译后的输出类似于：

<div class="book__title_adsfj4">Title: The Lord of the Rings</div>

我在一个按钮上添加了一个事件侦听器，当按下该按钮时，会将“title”类添加到此元素，以便为该特定类提供额外的样式，如下所示：

<div class="book__title_adsfj4 title">Title: The Lord of the Rings</div>

有没有办法我可以：

  1. 将一个类附加到一个元素，并且在我的 css 文件中没有对该类进行散列或
  2. 将类添加到与最终编译的哈希名称完全匹配的元素？

谢谢。

4

2 回答 2

1

我在这里写了我发现的最佳方法 - https://github.com/css-modules/css-modules/issues/199

基本上，它只是从原始 css 文件中导入这些样式。因为这些样式都是相同的，所以无论它们是否在不同的文件中导入，样式都会保留。

于 2016-12-20T21:47:07.337 回答
-1

当您有某种事件触发元素上的永久视觉变化时，这意味着您的元素具有状态！你会想要在 React 中使用 state 来处理这个变化。

在 React 中，状态是组件上的一个字典，每当它发生变化时，都会触发该组件的重新渲染。您可以在此处阅读状态：https ://reactjs.org/docs/state-and-lifecycle.html

您要做的是在您的状态中添加一个变量，例如“buttonPressed”（或您想要调用该事件或状态的任何内容），并根据您是否希望类将其设置为 true 或 false在那里。按下按钮时，您将调用 this.setState 来修改 state 中的变量并触发重新渲染。

然后，在您的渲染函数中，您将简单地检查该变量处于您的状态，并包含或不包含该类，如下所示：

<div className={styles.book__title + " " + this.state.buttonPressed ? styles.title : ""}>Title: {book.title}</div>
于 2018-11-25T05:23:12.453 回答