javascript - 将样式导入 React 组件时，如何分配基于关闭状态更新的类名？

Question

我正在使用 style-loader 以模块化方式将 css 注入(inject)我的组件 ({style.exampleClassName})。

我想在设定的时间内显示一个加载程序，然后显示一个图像(至少 16 个这样的组件以网格模式显示)。

我当前的组件如下所示:

// Child Component

/**
*
* Sets up props for the child (icon)
*
*/

import React, { Component } from 'react';
import styles from './styles.css';

class Child extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      hidden : "shown",
      loading: "loading"
    };
  }

  componentDidMount() {
    const self = this;
    const wait = this.props.wait;

    console.log('mounted');
    setTimeout(() => {
      console.log('timeout working ' + wait);
      self.setState({
        hidden: "hidden",
        loading: "loaded"
      });
    }, wait);
  }


  render() {

    const hidden = `styles.${this.state.hidden}`;
    const loading = `styles.${this.state.loading}`;

      return (
        <div>
        <link rel="stylesheet" type="text/css" href="./app/components/socialgrid/styles.css" />
          <div className={this.state.hidden}>
              <p>Loading...</p>
          </div>
          <div className={this.state.loading}>
              <p>Child - {this.props.wait}ms</p>
          </div>
        </div>
      )
  }

};

export default Child;


// Parent

/**
*
* Individual Icon Component
*
*/

import React, { Component } from 'react';
import cx from 'classnames';
import Img from 'components/Img';
import Child from './Child';

// import Fb from './Fb.png';

class IndIcon extends React.Component{
  render() {
    return (
      <div>
        <div>
					<Child wait={1000} />
					<Child wait={5000} />
					<Child wait={4000} />
        </div>
      </div>
    )
  }
};


export default IndIcon;

.hidden,
.loading{
  display: none;
}

通常我的样式会通过 className={styles.exampleClassName} 注入(inject)自己，但在这里我遇到了类没有被注入(inject)的问题，因为类根据状态改变(正如我上面所说，只是尝试不同的措辞来说清楚)。

我想分配的不仅仅是 display:none 元素，所以我确实需要这些组件的类。

帮助将不胜感激。谢谢!

Answer 1

你并没有太远......你只是没有将你的 const 变量传递到你的 JSX 中。尝试按如下方式修改您的渲染函数(修改以粗体突出显示):

render() {
    const hidden = `styles.${this.state.hidden}`;
    const loading = `styles.${this.state.loading}`;

      return (
        <div>
        <link rel="stylesheet" type="text/css" href="./app/components/socialgrid/styles.css" />
          <div className={<b>hidden</b>}>
              <p>Loading...</p>
          </div>
          <div className={<b>loading</b>}>
              <p>Child - {this.props.wait}ms<p></p>
          </div>
        </div>
      )
  }

注意以这种方式在组件中包含您的样式会污染全局 CSS 命名空间，如果您在应用程序的其他地方定义了相同名称的样式(由您自己或其他开发人员定义)，这可能会导致问题，这可能会导致不可预测的样式行为