SSR出现Prop `className` did not match错误

来源:4-2 Material-ui安装使用

qq_澤雨點石_0

2018-02-20

修改完成,第一次浏览是不会报错误。刷新,后面的浏览都会显示这种错误。

http://img.mukewang.com/szimg/5a8bec080001e43208950051.jpg

遇到这种情况可能是什么原因呢。先贴一下课程里server-render.js的代码

const ReactDomServer = require('react-dom/server')
const ejs = require('ejs')
const asyncBootStrapper = require('react-async-bootstrapper').default
const serialize = require('serialize-javascript')
const Helmet = require('react-helmet').default
const colors = require('material-ui/colors')
const createMuiTheme = require('material-ui/styles').createMuiTheme
const createGenerateClassName = require('material-ui/styles').createGenerateClassName
const SheetsRegistry = require('react-jss').SheetsRegistry

const getStoreState = (stores) => {
return Object.keys(stores).reduce((result, storeName) => {
result[storeName] = stores[storeName].toJson()
return result
}, {})
}
module.exports = (bundle, template, req, res) => {
return new Promise((resolve, reject) => {
const user = req.session.user
const sheetsRegistry = new SheetsRegistry()
const theme = createMuiTheme({
palette: {
primary: colors.lightBlue,
accent: colors.pink,
type: 'light'
}
})
const createStoreMap = bundle.createStoreMap
const createApp = bundle.default
const routerContext = {}
const stores = createStoreMap()
if (user) {
stores.appState.user.isLogin = true
stores.appState.user.info = user
}
const generateClassName = createGenerateClassName()
const app = createApp(stores, routerContext, sheetsRegistry, generateClassName, theme, req.url)
asyncBootStrapper(app).then(() => {
if (routerContext.url) {
res.status(302).setHeader('Location', routerContext.url)
res.end()
return
}
const state = getStoreState(stores)
const content = ReactDomServer.renderToString(app)
const helmet = Helmet.rewind()
const html = ejs.render(template, {
appString: content,
initialState: serialize(state),
meta: helmet.meta.toString(),
title: helmet.title.toString(),
style: helmet.style.toString(),
link: helmet.link.toString(),
materialCss: sheetsRegistry.toString()
})
res.send(html)
resolve()
}).catch(reject)
})
}

如果有其他需要我提供的信息,留言跟我说,我会尽快提供以求问题解决,谢谢。

写回答

1回答

Jokcy

2018-02-20

图片加载失败
请确保这个地方的配置加上

1
1
qq_澤雨點石_0
回答好及时,这是偶然么....谢谢提醒。我去看看这个prop的作用
2018-02-20
共1条回复

React全栈+服务器渲染(ssr)打造社区Webapp

【毕设面试】只会写业务代码?out了,带你学会搭建属于自己的工程!

768 学习 · 414 问题

查看课程