我正在使用 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"),如下图所示:
那么我该如何解决这个问题呢?
感谢您的帮助。
最佳答案
为了解决这个问题,我通过传递 styles 属性将 height:继承
属性从我的容器发送给我的 child 。
我的容器:WidgetsGrid.js
const styles = {
main: {
backgroundColor: "#ffffff",
height: "inherit"
}
}
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 style={styles} />
</div>
</ResponsiveReactGridLayout>
);
}
}
然后在我的 child FirstWidget.js 中,我通过将样式设置为等于样式来获取高度继承属性。 :
class FirstWidget extends Component {
render() {
return (
<Card style={this.props.style.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>
);
}
}
这样,高度首先由react-grid-layout和容器中的div定义,然后 Material UI卡被迫将其高度设置为与其容器相同的高度,因此您填充了所有div 如你所愿。
关于reactjs - 如何使用 Material UI Card 填充 React Grid Layout 项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49689221/