Использование withWidth HOC из пользовательского интерфейса материала - PullRequest
Новая
       42

Использование withWidth HOC из пользовательского интерфейса материала

0 голосов
/ 06 февраля 2019

Я использую версию 3.9.2 пользовательского интерфейса материала и пытаюсь использовать widthWith HOC в приложении SSR.

С помощью следующего кода, если я отключу Javascript в параметрах отладчикаИнструменты разработчика Chrome, все работает как положено (то есть отображается строка 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);

Однако проблема остается той же, и вывод не отображается.

Есть предложения, как это исправить?

1 Ответ

0 голосов
/ 06 февраля 2019

Параметр должен быть initialWidth (заглавными буквами W) вместо initialwidth, а квадратные скобки в документации просто указывают на то, что параметры являются необязательными.Правильный синтаксис будет выглядеть так: 

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