2017-11-10 19 views
0

私は反応が新しいです。私はちょうど学習を開始し、反応を実装します。私のプロジェクトでは、ブートストラップを使用しているときに問題があります。ブートストラップを使用して選択ボックスを表示しています。ページを選択するボックスが更新されると、ルートを変更すると選択ボックスが消えます。ここ コードである:ルート変更後にブートストラップが機能しない

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, browserHistory } from 'react-router'; 
import './public/css/bootstrap.min.css'; 
import './public/css/bootstrap-select.min.css'; 
import './public/css/custom.css'; 
import 'jquery'; 
import 'bootstrap'; 
import 'bootstrap-select'; 

import App from './app/app.js'; 
import Dashboard from './app/Dashboard'; 
import RevenueReports from './app/Reports'; 

ReactDOM.render(

    <Router history={browserHistory}> 
    <Route component={App}> 
    <Route path="/dashboard" component={Dashboard} /> 
     <Route path="/revenue" component={RevenueReports} /> 
    </Route> 
    </Router>, 
    document.getElementById('container') 
); 

エラーが..

APP成分示していない。これを使用している間

import React, {Component, PropTypes} from 'react'; 
import ActiveLink from "./active_links"; 
export default class Sidebar extends Component { 
     render() { 

     return (
    <aside className="main-sidebar"> 

      <section className="sidebar">     

      <ul className="sidebar-menu tree" data-widget="tree">      

       <ActiveLink to='/dashboard'> 

        <i className="icon-dashboard" /> 

       </ActiveLink> 


       <ActiveLink to='/revenue'> 

        <i className="icon-revenue-report" /> 

       </ActiveLink> 

      </ul> 
      </section> 

     </aside> 
    ); 
     } 
} 
+0

ここにあなたのルートコンポーネントを追加することもできます。それは役に立ちます –

+0

あなたのルートコンポーネントにもブートストラップコンポーネントが含まれているかどうかを確認します –

答えて

0

import React, {Component, PropTypes} from 'react'; 
import Header from './Common/header.js' 
import Middle from './Common/middle.js' 

export default class App extends Component { 
     render() { 
     return (
     <div className="main-wrapper"> 
     <Header/> 
     <Middle location={this.props.location}> 
      {this.props.children} 
     </Middle> 
     </div> 
    ); 
     } 
} 

サイドバーを

componentDidMount(){ 
    $('.selectpicker').selectpicker({ 
    }); 

私の問題を解決します。

関連する問題