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

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

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

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

Проверьте метод рендеринга 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 })

reactjs javascript css jss
person Let Me Tink About It    schedule 19.02.2019    source источник
comment
вы не можете экспортировать компонент по умолчанию 2, хотя вы можете экспортировать их по отдельности   -  person warl0ck    schedule 19.02.2019
comment
@ warl0ck: Можете ли вы дать ответ и пример того, как это будет выглядеть в этом случае?   -  person Let Me Tink About It    schedule 19.02.2019
comment
экспортировать по умолчанию withStyles(styles, {withTheme: true})(MyRegularButton)   -  person Dhaval Patel    schedule 19.02.2019
comment
@Mowzer Я ответил на примере, посмотрите, поможет ли это   -  person warl0ck    schedule 19.02.2019

Ответы (1)


arrow_upward
2
arrow_downward

Из вашего файла 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'

person warl0ck    schedule 19.02.2019