陣營使用的警告作出反應，熱裝載機：

Question

我收到錯誤，如下面

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

而且

Uncaught TypeError: Cannot read property 'unmountComponent' of null

嘗試使用react-hot-loader與我的基本設置。

webpack.config.js

const path = require("path") 
const HtmlWebpackPlugin = require("html-webpack-plugin") 
const ExtractTextPlugin = require("extract-text-webpack-plugin") 

const context = path.resolve(__dirname, "src") 

module.exports = { 
    context, 
    entry: [ 
    "react-hot-loader/patch", 
    "./js/index.js" 
    ], 
    output: { 
    path: path.resolve(__dirname, "build/js"), 
    filename: "index.js" 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(js|jsx)$/, 
     loader: "babel-loader", 
     options: { 
      plugins: [ 
      [ 
       "react-css-modules", 
       { 
       context 
       } 
      ] 
      ] 
     } 
     }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: [ 
      { 
       loader: "css-loader", 
       options: { 
       modules: true, 
       importLoaders: 1, 
       localIdentName: "[path]___[name]__[local]___[hash:base64:5]", 
       sourceMap: true 
       } 
      }, 
      'postcss-loader' 
      ] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: "./index.html", 
     filename: "index.html", 
     inject: "body" 
    }), 
    new ExtractTextPlugin("css/app.css") 
    ], 
    devServer: { 
    contentBase: path.resolve(__dirname, "src"), 
    historyApiFallback: true 
    }, 
    devtool: "eval" 
} 

index.js

import ReactDOM from "react-dom" 
import React from "react" 
import {AppContainer} from "react-hot-loader" 
import App from "./App.jsx" 
import "../css/global.css" 

const render = Component => { 
    ReactDOM.render(
    <AppContainer> 
     <Component /> 
    </AppContainer>, 
    document.getElementById("app") 
) 
} 

render(<App />) 

if (module.hot) { 
    module.hot.accept("./App.jsx",() => render(<App />)) 
} 

App.jsx

即使我只是做

export default() => <h1>Hello</h1> 

我得到錯誤

我做一個更加完整的類壽

import React from 'react' 
import {createStore, applyMiddleware} from "redux" 
import {Provider} from "react-redux" 
import createHistory from "history/createBrowserHistory" 
import {Route, Switch} from "react-router" 
import {NavLink} from "react-router-dom" 
import {ConnectedRouter, routerMiddleware} from "react-router-redux" 
import { 
    Layout, 
    Panel, 
    AppBar, 
} from "react-toolbox" 
import Navigation from "react-toolbox/lib/navigation" 

import financeApp from "./reducers" 
import SbpInvestmentsIndex from "./sbpInvestments/SbpInvestmentsIndex.jsx" 
import Http404 from "./Http404.jsx" 
import "./app.css" 

const history = createHistory() 
const historyMiddleware = routerMiddleware(history) 
const store = createStore(
    financeApp, 
    applyMiddleware(historyMiddleware) 
) 

export default class App extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     drawerActive: false 
    } 

    this.toggleDrawerActive = this.toggleDrawerActive.bind(this) 
    } 

    toggleDrawerActive() { 
    this.setState({ 
     drawerActive: !this.state.drawerActive 
    }) 
    } 

    render() { 
    return (
     <Provider store={store}> 
     <ConnectedRouter history={history}> 
      <Layout> 
      <Panel> 
       <AppBar title="Personal Finance"> 
       <Navigation type="horizontal"> 
        <NavLink to="/" styleName="app-link"> 
        SBP Investments 
        </NavLink> 
       </Navigation> 
       </AppBar> 

       <Switch> 
       <Route exact path="/" component={SbpInvestmentsIndex} /> 
       <Route component={Http404} /> 
       </Switch> 
      </Panel> 
      </Layout> 
     </ConnectedRouter> 
     </Provider> 
    ) 
    } 
} 

請告訴我錯在這裏？在Github

Answer 1

裏面render()代碼，您試圖使函數調用之前Component，它已經被實例化（<... />）。

相反，通過組件本身爲render()：

render(App) 

if (module.hot) { 
    module.hot.accept("./App.jsx",() => render(App)) 
}