javascript - 我可以发布我在 ES 和谐风格 JavaScript 中导入的内容吗？

Question

在一个ES Harmony风格的脚本中，我将在React中为不同的组件分解不同的风格，如下代码:

import React from 'react';

/** Modules */
import style from './main.css';

export class TableBody extends React.Component {
    constructor(props) {
    }

    componentDidMount() {
    }

    componentWillUnmount() {
        /** release style */
    }
}

有没有什么办法可以在componentWillUnmount方法中释放我之前导入的样式，使这个组件的样式不影响其他组件？

在问这个问题之前，我尝试过一些方法，比如使用delete或者给它赋值一个null对象，但是这两种方法都行不通。

Answer 1

如果您正在使用 CSS 模块 和 webpack，您在 React 组件中导入的每个 CSS 文件都可以添加一个前缀或您喜欢的其他格式。

真实世界的例子将是这样的 class="ChatListItem__unread___249Kw"。

除非你真的在你的 React 组件中使用 ChatListItem__unread___249Kw，否则很难影响其他组件。 (249Kw是一个hash码，生产环境下只能通过config保存。)

在 webpack 配置中配置 CSS Loader

  {
    test: /\.css$/,
    loader: 'style!css?modules&importLoaders=1&' +
    'localIdentName=[name]__[local]___[hash:base64:5]!postcss',
  },

React 组件及其 CSS 文件结构

并且可以重写导入CSS文件的方式

import React from 'react';

/** Modules */
import styles from './TableBody.css';

export class TableBody extends React.Component {
    constructor(props) {
    }

    componentDidMount() {
    }

    componentWillUnmount() {
        /** release style */
    }

    render () {
        return <div className={styles.theClassName}></div>
    }
}