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>标记中的道具，否则无法输入字段。

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

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

未处理的承诺拒绝TypeError：严格模式下不允许分配给只读属性

Link到该应用以及App.scss和GettingStarted.scss。

版本： 反应：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

react：CSS在IE和Edge中使用classList中断

1 个答案: