反應：CSS在IE和Edge中使用classList中斷

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>標記中的props，否則無法在該字段中鍵入內容。

AppContainerBody和AppContainerBodyWithoutLogin css類是從app.scss繼承的。 GettingStartedContainerBody列表屬於GettingStarted.scss

我將這些類列表添加到我的React應用程序的幾乎每個文件中。 該應用程序可在Chrome，Firefox和Safari上正常運行，但在控制台中出現此錯誤：

未處理的承諾拒絕TypeError：在嚴格模式下不允許分配給只讀屬性

鏈接到app和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