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

IT技术 css reactjs jss
2021-05-03 12:46:50

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

路径/到/MyButtons.js

SyntaxError: path/to/MyButtons.js: 当前未启用对实验语法“exportDefaultFrom”的支持 (64:8)：

64 | 导出 withStyles(styles)({ AllButtonsRow, UDButtons, });

我究竟做错了什么？

我的按钮.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个回答

你忘记了default关键字：

export default withStyles(styles)({ MyRegularButton, MyStyledButton })
  1. 您需要default在导出中包含关键字。
  2. 为了访问 withStyles 创建的类，您需要使用 props 访问它们 props.classes.button
  3. 您还需要确保 withStyles 将该theme属性传递到您的样式函数中。默认情况下，这设置为 false。没有这个，您将无法访问诸如theme.spacing.unit.

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

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

除了接受的答案，您还需要添加classes到输入props对象中，如下所示。

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

所以整个文件如下。（编辑：@MattC 的合并回答）

我的按钮.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 })
其它你可能感兴趣的问题
上一篇为react渲染处理 .map 和 if/else 语句 - 使用 React-select 下一篇使用 Firebase 实时数据库和 React 将图像上传给用户