在材质 UI 中使用 withWidth HOC答案

【问题标题】：Using withWidth HOC from material UI在材质 UI 中使用 withWidth HOC
【发布时间】：2019-06-30 15:51:27
【问题描述】：

我正在使用 Material UI 的 3.9.2 版本，并且我正在尝试在 SSR 应用中使用 widthWith HOC。

使用以下代码，如果我在 Chrome 开发者工具的调试器选项中禁用 Javascript，一切都会按预期运行（即，hello world! 字符串正在显示）：

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>Hello World!</div>
    );
  }
}

export default App;

如果我只是添加withWidth HOC，它会返回一个空组件，如docs 中所述：

由于window.innerWidth在服务器上不可用，我们默认在第一次挂载时渲染一个空组件。

但是有一个withWidth 配置选项可以为此设置默认值：

import React from 'react';
import withWidth from '@material-ui/core/withWidth';

class App extends React.Component {
  render() {
    return (
      <div>Hello World!</div>
    );
  }
}

export default withWidth(
  [{
    initialwidth: 'lg',
  }],
)(App);

但是问题仍然存在，并且没有显示任何输出。

关于如何解决此问题的任何建议？

【问题讨论】：

标签： javascript reactjs material-ui server-side-rendering higher-order-components

【解决方案1】：

选项应该是initialWidth（大写W）而不是initialwidth，并且文档中的方括号只是表示选项是可选的。正确的语法如下所示：

export default withWidth({initialWidth: 'lg'})(App);

【讨论】：