2

react-router と material-ui を使用して Web アプリケーションを構築しています。最近、react hot loader が更新され、material-ui で ho loader を使用しているときにいくつかの問題があることに気付きました。反応ルーターで使用するときはいつでも、子コンポーネントに対してホットローダーが機能しません。これがindex.jsの私のコードです

import React from 'react';
import {render} from 'react-dom';
import { AppContainer } from 'react-hot-loader'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Router, Route, Link, browserHistory,IndexRoute } from 'react-router'
import injectTapEventPlugin from 'react-tap-event-plugin';
import routes from './routes';

injectTapEventPlugin();

const App = () => (
  <MuiThemeProvider>
    <Router history={browserHistory} routes={routes} />
  </MuiThemeProvider>
);

render(<App/>,document.getElementById('app'));

if (module.hot) {
  module.hot.accept('./components/App', () => {
    const NextApp = require('./components/App').default;
    render(
      <AppContainer>
      <MuiThemeProvider>
        <NextApp/>
      </MuiThemeProvider>
      </AppContainer>
      ,
      document.getElementById('app')
    );
  });
}

ここに私のアプリコンポーネント

import React from 'react';
import Home from './Home';
import About from './About/AboutPage.react';
import NavigationBar from './navigation/navigationBar.react';



class App extends React.Component{
   render(){
     return(
       <div>
        <NavigationBar/>
        {this.props.children}
       </div>
     );
   }
}

export default App;

ルートファイル

import React from 'react';
import {render} from 'react-dom';
import { Router, Route, Link, browserHistory,IndexRoute } from 'react-router'
import App1 from './components/App';
import NavigationBar from './components/navigation/navigationBar.react';
import greetings from './components/Login/greetings';


export default (
     <Route path="/" component={App1}>
       <IndexRoute component={greetings}/>
     </Route>
);

子コンポーネントに変更を加えるたびに、ブラウザー コンソールに
、次のモジュールをホット アップデートできなかったという警告が表示されます: (完全なリロードが必要です) これは通常、変更されたモジュール (およびその親) がその方法を知らないためです。自分自身をホットリロードします。詳細については、 http://webpack.github.io/docs/hot-module-replacement-with-webpack.htmlを参照してください。 これを取得する特定の理由と、この問題を解決する方法はありますか?

4

1 に答える 1

1

また、react-hot-loader の AppContainer コンポーネントでも初期レンダリングをラップしていることを確認してください。このような：

const App = () => (
  <AppContainer>
    <MuiThemeProvider>
      <Router history={browserHistory} routes={routes} />
    </MuiThemeProvider>
  </AppContainer>
);

また、あなたの webpack 構成が表示されないのでreact-hot-loader/patch、たとえば次のような最初のエントリにも含めるようにしてください。

entry: [
  'react-hot-loader/patch',
  `webpack-dev-server/client?http://localhost:${config.port}`,
  'webpack/hot/only-dev-server',
  './src/index.jsx'
],

ファイルもある場合は、.babelrc次のようにプラグインの 1 つとして含めるようにしてください。

{
  "presets": [
    "react",
    "es2015",
    "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-decorators-legacy"
  ]
}
于 2016-10-24T19:15:33.943 に答える