Question

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

Inbox.js：52获取文档时出错：

错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到了：对象。

检查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中使用样式导入无状态功能组件

1 个答案: