如何在 Reactjs 中导出带有样式的无状态功能组件

Question

我有一个名为 MyButtons.js 的文件，我想从中导出两个无状态功能组件，其中一个包含一个 style 变量。但是我收到以下错误。

path/to/MyButtons.js
SyntaxError: path/to/MyButtons.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (64:8):

64 | export withStyles(styles)({ 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, });

Answer 1

您忘记了 default 关键字：

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

Answer 2

除了已接受的答案外，您还需要将 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 })

Answer 3

您需要在导出中包含 default 关键字。
为了访问 withStyles 创建的类，您需要使用 props.classes.button
您还需要确保 withStyles 将 theme 属性传递到您的样式函数中。 By default this is set to false。没有它，您将无法访问 theme.spacing.unit.

总而言之，您需要将最后一行更改为以下内容：

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

如何在 Reactjs 中导出带有样式的无状态功能组件

How to export a stateless functional component with styles in Reactjs

css

reactjs

jss