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

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

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

У меня есть файл с именем MyButtons.js, из которого я хочу экспортировать два функциональных компонента без состояния, один из которых содержит переменную style.Но я получаю следующую ошибку.

path / to / MyButtons.js

SyntaxError: path / to / MyButtons.js: поддержка экспериментального синтаксиса exportDefaultFrom в настоящее время не включена (64: 8):

64 |экспорт со стилями (стилями) ({AllButtonsRow, UDButtons,});

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

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 = props => (<Button className={classes.button}>Click me!</Button>);

export withStyles(styles)({ MyRegularButton, MyStyledButton, });

Ответы [ 3 ]

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

В дополнение к принятому ответу вам также необходимо добавить classes к объекту ввода props следующим образом. 

const MyStyledButton = ({ classes, }) => (...

Таким образом, весь файл выглядит следующим образом.(Изменить: встроенный ответ @MattC)

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 })
0 голосов
/ 19 февраля 2019
  1. Вам необходимо включить ключевое слово default в ваши экспорты.
  2. Чтобы получить доступ к классам, которые создает withStyles, вам нужно получить к ним доступ через реквизиты, используя props.classes.button
  3. Вам также необходимо убедиться, что withStyles передает свойство theme в вашу функцию стилей. По умолчанию установлено значение false .Без этого вы не сможете получить доступ к таким свойствам, как theme.spacing.unit.

В итоге вам необходимо изменить свою последнюю строку следующим образом: 

export default withStyles(styles, { withTheme: true })({ MyRegularButton, MyStyledButton })
0 голосов
/ 18 февраля 2019

Вы забыли ключевое слово default: 

export default withStyles(styles)({ MyRegularButton, MyStyledButton })
...