Material UI 与 React 16 的兼容性为 0.2 倍

Question

尝试从 React 15.4 升级到 React 16.4.1(也将 react-dom 升级到 16.4.1(后，我从路由器收到以下错误消息：

TypeError: _nextProps.children is not a function
at ReactDOMServerRenderer.render (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2491:55)
at ReactDOMServerRenderer.read (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19)
at renderToString (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25)
at render (/var/www/web/server/routes/others.jsx:141:24)
at process._tickCallback (internal/process/next_tick.js:68:7)

代码：

const render = () => {
const body = renderToString(
<MuiThemeProvider muiTheme={muiTheme}>
<ThemeProvider theme={theme}>
<Provider store={store}>
<IntlProvider>
<RouterContext {...renderProps} />
</IntlProvider>
</Provider>
</ThemeProvider>
</MuiThemeProvider>
);

此处定义了render，但随后在同一路由文件中返回：

Promise.all(prefetchData(renderProps, store))
.then(render)
.catch(prefetchError => next(prefetchError));

我按照推荐的说明从 React 15.x 升级到 React 16.x

由于我发现了有关与 React 16 的材料用户界面兼容性的相关问题：

https://github.com/mui-org/material-ui/issues/8434

https://github.com/mui-org/material-ui/issues/7795

我想知道此错误消息是否可能是由 material-ui 0.2x 和 React 16.x 之间的不兼容引起的，或者换句话说，我想知道是否需要升级到 material-ui 1.x 以便能够使用 React 16.x

Answer 1

我们正在将material-ui 0.18.1与React 16.3一起使用进行客户端渲染，并且一切正常。我不认为此错误是因为material-ui 0.2x和React 16.x之间的不兼容。

对于服务器端渲染，我找到了这个存储库，它使用React 16.x在服务器端渲染material-ui 0.x。所以这绝对不是兼容性问题。

Answer 2

我最近的任务是同时支持 MUI 0.x 和 MUI 1.x，虽然这很有挑战性，但我找到了一种让它工作的方法。

使用MUI 0.x，我发现可以很好地协同工作的版本是：

• material-ui@0.19.4
• react@16.3.2- 升级到react@16.4会破坏它，这与该次要更新中事件的处理方式有关。

让 MUI 1.x 与 MUI 0.x 协同工作还需要一些其他配置，但希望这部分足以回答您的问题。