从材料UI使用withWidth HOC

Question

我使用的材料UI的版本3.9.2，我试图用widthWith HOC在SSR的应用程序。

用下面的代码，如果我在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);

然而，问题依旧，并正在显示没有输出。

对于如何解决这个问题，有任何的建议吗？

Answer 1

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

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