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

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

Inbox.js:52 Error getting documents:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of 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 })

вы не можете экспортировать компонент по умолчанию 2, хотя вы можете экспортировать их по отдельности

— 19.02.2019 07:49

@ warl0ck: Можете ли вы дать ответ и пример того, как это будет выглядеть в этом случае?

— 19.02.2019 07:57

экспортировать по умолчанию withStyles(styles, {withTheme: true})(MyRegularButton)

— 19.02.2019 08:01

@Mowzer Я ответил на примере, посмотрите, поможет ли это

— 19.02.2019 08:02

javascript css reactjs jss

19.02.2019 07:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 420

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

19.02.2019 08:01