javascript - react : CSS breaks using classList in IE and Edge

Question

以下代码在 Edge 和 Internet Explorer 中的 CSS 和应用中断-

componentDidMount() {
  const styles = require('./GettingStarted.scss');
  document.getElementById('bodyTag').classList = '';
  document.getElementById('bodyTag').classList.add(styles.GettingStartedContainerBody);
  document.getElementById('content').classList.remove(styles.AppContainerBody);
  document.getElementById('content').classList = '';
  document.getElementById('content').classList.remove(styles.AppContainerBodyWithoutLogin);
}

componentWillReceiveProps(nextProps) {
  if (!this.props.checked && nextProps.checked) {
    let queryString = '';
    const windowLocation = window.location.href;
    const queryStringStartIndex = windowLocation.indexOf('?');
    if (queryStringStartIndex > 0) {
      queryString = windowLocation.substring(queryStringStartIndex,windowLocation.length);
    }

    if(nextProps.result[0].status === '0') {
      browserHistory.push(config.BASE_URL + '/userdetail' + queryString);
    } else if(nextProps.result[0].status === '1') {
      browserHistory.push(config.BASE_URL + '/signuplogin' + queryString);
    }
  }
}

render() {
  const { checking, checkingError, fields: {emailid}} = this.props;
  const styles = require('./GettingStarted.scss');
  const pmdLogo = require('../../../static/plexusmd-logo.png');
  return (
    <div className={styles.gettingStartedPage}>
      <Helmet {...config.app.head} title="Getting Started | PlexusMD" />
      <div className="gettingStartedForm margin-top-bottom-40">
        <div className="headerLogoMenuContainer text-center margin-bottom-30">
          <IndexLink className="brandlogo" to={config.BASE_URL + '/gettingstarted'} >
            <img className="brand" src={pmdLogo} width="80" height="25" title={config.app.title} alt={config.app.title} />
          </IndexLink>
        </div>
        <form className="form" onSubmit={this.handleSubmit} >
          <h2 className="orange font22 text-left text-bold text-uppercase margin-top-0 margin-bottom-50 margin-left-right-20">Getting started</h2>
          <div className="form-group">
            <label htmlFor="password" className="control-label gray">What's your Email address?</label>
            <div className="input-group">
              <input type="text" id="emailid" name="emailid" ref="emailid" placeholder="Email address" value={this.props.emailid} className="form-control text-lowercase" {...emailid}/>
              {!emailid.error && <span id="emailid" className="input-group-addon input-group-icon"><i className="icon ion-ios-checkmark-empty icon-size green"/></span>}
              { emailid.error && emailid.dirty && <div id="emailid" className="red smaller margin-0-auto">Enter a valid Email</div>}
            </div>
          </div>
          <div className="form-group">
            <div className="text-right">
              {checkingError && <p className="loginError red text-left">{checkingError}</p>}
              {!checking && <button className="btn btn-primary" onClick={this.handleSubmit.bind(this)} disabled={emailid.error}>NEXT
              </button>}
              {checking && <button className="btn btn-primary" disabled={checking}>WAIT</button>}
            </div>
          </div>
          <div className="clear"></div>
        </form>
      </div>
      <div className="clear"></div>
    </div>
  );
}

此页面的背景颜色没有更新，输入字段也被禁用，即，除非我删除 <input> 中的 Prop ，否则无法输入该字段标签。

AppContainerBody和 AppContainerBodyWithoutLogin css 类继承自 app.scss . GettingStartedContainerBody类列表属于 GettingStarted.scss

我在我的 React 应用程序中的几乎每个文件中都添加了这些类列表。该应用程序在 Chrome、Firefox 和 Safari 中运行良好，但我在控制台中收到此错误:

Unhandled promise rejection TypeError: Assignment to read-only properties is not allowed in strict mode

Link到应用程序和App.scss和 GettingStarted.scss .

版本: react :0.14.2
边缘:40.15063.674.0

Answer 1

将函数中的所有 require 语句移至文件顶部。

因此，不要在每个要使用样式的函数中调用 const styles = require('./GettingStarted.scss');，只需导入一次即可。

喜欢:

require('./GettingStarted.scss');
// or
import './GettingStarted.scss';

---

classList 不能直接改变。使用 classList.add 和 classList.remove 或通过 className = '' 或 .setAttribute( 'class', '' )

---

还尝试通过将选择保存到变量来尽量减少 DOM 选择/代码重复，例如:

const bodyTag = document.getElementById('bodyTag');
// further instructions for #bodyTag
const content = document.getElementById('content');
// further instruction for #content