使用来自 material UI 的 withWidth HOC

Question

我正在使用 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，它 returns 一个空组件，如 docs:

中所述

As window.innerWidth is unavailable on the server, we default to rendering an empty component during the first mount.

但是有一个 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);

使用来自 material UI 的 withWidth HOC

Using withWidth HOC from material UI

javascript

reactjs

material-ui

server-side-rendering

higher-order-components