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/>
import MyRegularButton from './MyButtons';
import MyStyledButton from './MyButtons';
<MyButtons />
我做错了什么?
我的按钮.jsimport 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 })
最佳答案
从您的 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 }
关于javascript - 在 Reactjs 中导入带有样式的无状态功能组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54760206/