Импорт функциональных компонентов без сохранения состояния со стилями в Reactjs - PullRequest
Новая
       10

Импорт функциональных компонентов без сохранения состояния со стилями в Reactjs

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

При реализации этого ответа я получаю следующее сообщение об ошибке.

Inbox.js: 52 Ошибка при получении документов:

Ошибка: тип элементаНедопустимый: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: object.

Проверьте метод рендеринга WithStyles(Component).

Inbox.js вызывает MyView.js.И MyView.js импортирует <MyButtons/>

MyView.js 
import MyRegularButton from './MyButtons';
import MyStyledButton from './MyButtons';

<MyButtons />

Что я делаю не так?

MyButtons.js 
import React from 'react';
import { withStyles, } from '@material-ui/core';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
});

const MyRegularButton = props => (<Button>Click me!</Button>);

const MyStyledButton = ({ classes, }) => (
  <Button className={classes.button}>Click me!</Button>
);

export default withStyles(styles, { withTheme: true })({ MyRegularButton, MyStyledButton })

1 Ответ

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

Из вашего файла Button.js вы можете экспортировать оба компонента, например 

import React from 'react';
import { withStyles, } from '@material-ui/core';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
});

const MyRegularButton = props => (<Button>Click me!</Button>);

const MyStyledButton = ({ classes, }) => (
  <Button className={classes.button}>Click me!</Button>
);

const Regular = withStyles(styles, { withTheme: true })(MyRegularButton)
const StyledButton = withStyles(styles, { withTheme: true });(MyStyledButton);                                                       
export { Regular,StyledButton}

, а затем импортировать их в разные файлы, например:

import { Regular } from './Button'

и

import { StyledButton } from './Button'

...