Question

我正在使用style-loader将css模块化地注入到我的组件中（{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}注入自己但是在这里我遇到了没有被注入的类的问题，因为类根据状态而改变（如上所述，只是尝试不同的措辞要清楚）。

我想分配的不仅仅是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={hidden}>
              <p>Loading...</p>
          </div>
          <div className={loading}>
              <p>Child - {this.props.wait}ms
          </div>
        </div>
      )
  }

N.B。以这种方式在组件中包含样式会污染全局CSS命名空间，如果你有样式，如果在应用程序的其他地方定义相同的名称（由你自己或其他开发人员）可能会导致不可预测的样式行为，则会导致问题

Answer 2

即使我真的想在状态变化上更新这些类，我也改用了这条路线并且更好了：

import React, { Component } from 'react';
import Spinner from './Spinner';
import Icon from './Icon';

class Child extends React.Component {

  constructor(props){
  	super(props);

    this.state = {
    	loading: true
    }
  }

  componentDidMount(){
    const wait = this.props.wait;

  	setTimeout(() => {
    	this.setState({
        loading: false
      })
    }, wait)
  }

  render() {

    let content = this.state.loading ?
    <div><Spinner /></div> :
    <div><Icon /></div>;

    return (
    	<div>{content}</div>
    )
  }

};

这样它会根据状态变化和设置超时加载组件。

将样式导入React组件时，如何指定基于关闭状态更新的className？

2 个答案: