具体的なリアクションコードはIE11でレンダリングされていません

Question

ChromeとFirefoxでは正しく描画されますがIE11では正しく表示されない小さなコンポーネントを作成しました。アプリケーションのメインエントリポイントは、IEの互換性のセットを持っている：

import React from 'react'; 
import { SettingsPane, SettingsPage, SettingsContent, SettingsMenu} from 'react-settings-pane'; 
import {Col, Form, FormGroup, FormControl, ControlLabel, HelpBlock, Button, Alert, Checkbox} from 'react-bootstrap' 
import { Creatable } from 'react-select'; 

const Settings = React.createClass({ 

    render: function() { 
     var data = this.props.data; 
     var envFilter = data["settings.notifications.environments"] || ""; 
     var isChecked = this.props.data['settings.notifications.receiveMailNotifications']; 

     const menu = [ 
      { 
       title: 'Email warnings', 
       url: '/settings/notifications' 
      } 
     ]; 

     // Save settings after close 
     let leavePaneHandler = (wasSaved, newSettings, oldSettings) => { 
      // "wasSaved" indicates wheather the pane was just closed or the save button was clicked. 

      if (wasSaved) { 
       var environmentsObject = newSettings["settings.notifications.environments"]; 
       var environments = environmentsObject.toString(); 
       var applications = newSettings["settings.notifications.applications"]; 

       this.props.onSubmit(newSettings); 

      } 
     }; 

     return (
      <SettingsPane items={menu} index="/settings/notifications" settings={data} 
          onChange={this.settingsChanged} onPaneLeave={leavePaneHandler}> 
       <SettingsMenu headline="Settings"/> 
       <SettingsContent header={true}> 
        <SettingsPage handler="/settings/notifications"> 
         <FormGroup> 
          <Col componentClass={ControlLabel} sm={2} /> 
          <Col sm={10}> 
           <label> 
           <input 
            type="checkbox" 
            checked={isChecked} 
            onChange={this.props.toggleMailNotification} 
            /> 
            Receive mail notification for these environments 
            </label> 
          </Col> 
         </FormGroup> 
         <FormGroup> 
          <Col componentClass={ControlLabel} sm={2}> 
           <div> 
            <label>Miljø/miljøklasse</label> 
           </div> 
          </Col> 
          <Col sm={10} className="dummy"> 
           <Creatable 
            name="settings.notifications.environments" 
            options={this.props.options} 
            value={envFilter} 
            onChange={this.props.handleEnvironmentsChange} 
            multi={true} 
            allowCreate={true} 
            tabSelectsValue={false} 
            className="settings-creatable" 
            placeholder="Enter environments" 
           /> 
          </Col> 
         </FormGroup> 
        </SettingsPage> 
       </SettingsContent> 
      </SettingsPane> 
     ) 
    } 
}); 


export default Settings; 

がどのように私はIE11は、このコードをレンダリングしない原因を正確に特定するに取り掛かる必要があります。

doctype html 
html 
    head 
    meta(http-equiv='X-UA-Compatible', content='IE=edge') 
    title= title 
    link(rel='stylesheet', href='./stylesheets/eventinfo.css') 
body 
block content 

私の成分を返すには、このようになりますか？コンソールにエラーはありません。アドバイスをいただければ幸いです。

Answer 1

お返事ありがとうございます。私は、これをデバッグするのではなく、反応ブートストラップコンポーネントに基づいてコードを書き直しました。 次回は、コメントセクションで提供されているデバッグのヒントを使用します。