React.createElement:type无效--应为字符串(用于内置组件)或类/函数(用于复合组件)，但得到的却

Question

我用材料ui编写了一个reactjs示例代码，得到了以下错误。

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null.
Check the render method of `TransitionGroup`.
in TransitionGroup (created by ForwardRef(TouchRipple))
in span (created by ForwardRef(TouchRipple))
in ForwardRef(TouchRipple)
in ForwardRef(TouchRipple) (created by WithStyles(memo))
in WithStyles(memo) (created by ForwardRef(ButtonBase))
in button (created by ForwardRef(ButtonBase))
in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(Button))
in ForwardRef(Button) (created by WithStyles(ForwardRef(Button)))
in WithStyles(ForwardRef(Button)) (at Ranking.js:49)
in div (created by ForwardRef(CardActions))
in ForwardRef(CardActions) (created by WithStyles(ForwardRef(CardActions)))
in WithStyles(ForwardRef(CardActions)) (at Ranking.js:48)
in div (created by ForwardRef(Paper))
...
in Provider (at src/index.js:13)
console.<computed> @ index.js:1

我的代码是这样的。

import React from 'react';
import { Typography, Button, CardActions, CardContent, CardMedia, Card } from '@material-ui/core';
export default class Ranking extends React.Component {
componentDidMount() {
this.props.onMount(this.props.categoryId);
}
componentWillReceiveProps(nextProps) {
if (this.props.categoryId !== nextProps.categoryId) {
this.props.onUpdate(nextProps.categoryId);
}
}
render() {
const { category, ranking, error } = this.props;
return(
<div>
<h2>{typeof category !== 'undefined' ? `${category.name}`:''}</h2>
{(() => {
return ranking.map((item, i) => (
<Card
key={`ranking-item-${item.code}`}
style={{ width: '400px', margin: '32px auto' }}
>
<CardMedia image={item.imageUrl} title={`${i + 1} ${item.name}`} style={{ height: '200px' }} />
<CardContent>
<Typography variant="body1">{`${i + 1} ${item.name}`}</Typography>
</CardContent>
<CardActions disableSpacing>
<Button>aaa</Button>
<button href={item.url} style={{width: '200px'}}>aa</button>
</CardActions>
</Card>
));
})()}
</div>
);
}
}

如果我删除<Button>aaa</Button>，则显示此页面时不会出现任何错误。我很困惑为什么会发生这种错误。我想解决这个问题。有人能给我个建议吗？

Answer 1

也许是因为你把太多东西粘在一起了试试

import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';

Answer 2

在安装react转换组后解决了此问题。我不使用过渡组，但需要这个包。