我收到如下错误
React.createElement:type无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object。
并且
未捕获的TypeError:无法读取null的“unmountComponent”属性
尝试在我的基本设置中使用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
上的代码答案 0 :(得分:0)
在render()
内,您试图在函数调用之前渲染Component
,它已经被实例化(<... />
)。
相反,将组件本身传递到render()
:
render(App)
if (module.hot) {
module.hot.accept("./App.jsx", () => render(App))
}