material-ui / Как оформить HOC с помощью withStyles ()? - PullRequest
Новая
       8

material-ui / Как оформить HOC с помощью withStyles ()?

0 голосов
/ 11 июня 2018

Мой HOC: 

const withPaper = Component => props => (
  <Paper>
    <Component {...props} />
  </Paper>
);

export default withPaper;

Я хочу стилизовать компонент «Бумага», используя withStyles(): 

const styles = theme => ({
  root: {
    backgroundColor: 'green'
  }
});

const withPaper = ?? => ?? => (
  <Paper className={classes.root}>
    <Component {...props} />
  </Paper>
);

export default withStyles(styles)(withPaper);

Как я могу добавить классы для поддержки этого случая?Моя простая идея Component => ({classes, ...props}) => регистрирует ошибку.

TypeError: Невозможно вызвать класс как функцию

Ответы [ 2 ]

0 голосов
/ 18 июня 2018

Отвечая на мой собственный вопрос.

Я проигнорировал возвращение HOC.Он возвращает «Компонент» вместо «Элемент реагирования».Я не уверен, но я думаю, что это причина того, что я не мог вводить классы вне HOC.

Мое решение, которое хорошо работает - стилизация внутри HOC: 

const withPaper = Component => {
  const WithPaper = ({ classes, ...props }) => (
    <Paper className={classes.root}>
      <Component {...props} />
    </Paper>
  );

  const styles = theme => ({
    root: {
      backgroundColor: 'green'
    }
  });

  return withStyles(styles)(WithPaper);
};

export default withPaper;

К вашему сведению, пользователи TypeScript могут обратиться к ответу Рахеля.

0 голосов
/ 15 июня 2018

Я сам в процессе изучения Material-UI и TypeScript, и я на самом деле боролся с одной и той же вещью :-) Извиняюсь, если вы искали решение JS, но явные типы могут действительно помочь: 

import * as React from "react";
import createStyles from "@material-ui/core/styles/createStyles";
import { WithStyles } from "@material-ui/core";
import Paper from "@material-ui/core/Paper/Paper";
import { compose } from "recompose";
import withStyles from "@material-ui/core/styles/withStyles";

const styles = createStyles({
  root: {
    backgroundColor: "green"
  }
});

type WrapperProps = WithStyles<typeof styles>;

const withPaper = <P extends {}>(Component: React.ComponentType<P>) => {
  type Props = P & WrapperProps;

  return (props: Props) => {
    return (
      <Paper className={props.classes.root}>
        <Component {...props} />
      </Paper>
    );
  };
};

export default compose(withStyles(styles), withPaper);

Edit xvkwo6vzxz

Обратите внимание на использование перенимать , чтобы compose ваши компоненты высшего порядка.Если вы не возражаете против этой зависимости от библиотеки, вы также можете обойтись без: 

export default (component: React.ComponentType) => withStyles(styles)(withPaper(component));
...