Question

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

使用以下代码，如果我在Chrome Developer Tools的调试器选项中禁用了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);

从材质UI使用withWidth HOC

1 个答案: