我正在使用 React Grid 布局来显示小部件网格。
这是我的网格组件:
class WidgetsGrid extends Component {
render() {
var layout = [
{ i: "a", x: 0, y: 0, w: 3, h: 3, minW: 2, maxW: 4 }
];
var layouts = { lg: layout };
return (
<ResponsiveReactGridLayout
className="layout"
layouts={layouts}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
>
<div key="a">
<FirstWidget />
</div>
</ResponsiveReactGridLayout>
);
}
}
我在网格内显示一个孩子(FirstWidget):
class FirstWidget extends Component {
render() {
return (
<Card style={styles.main}>
<IconActivity style={styles.activity} color={green500} />
<CardHeader title="Premier Widget" subtitle="Sous-titre" />
<CardText>
<BarChart />
</CardText>
<div style={styles.footer}>
<h6 style={styles.timeText}>
<IconTime style={styles.iconText} />
<span>Actualisé il y a 5 minutes</span>
</h6>
</div>
</Card>
);
}
}
问题是显示不正确,FirstWidget 卡没有填充 div 父级 (div key="a"),如下图所示:
那么我该如何解决呢?
感谢您的帮助。