javascript - 在 Reactjs 中导入带有样式的无状态功能组件

Question

When implementing this answer, I get the following error message.

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/>

我的 View .js

import MyRegularButton from './MyButtons';
import MyStyledButton from './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 })

Answer 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}

然后您可以将其导入到不同的文件中，例如:

从 './Button' 导入 { Regular}

和

从 './Button' 导入 { StyledButton }