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

Question

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

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}

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

import { Regular } from './Button'

和

import { StyledButton } from './Button'

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

Importing stateless functional components with styles in Reactjs

javascript

css

reactjs

jss