Question

我使用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键=＆＃34; a＆＃34;），如下图所示：

那我该如何解决呢？

感谢您的帮助。

Answer 1

为解决此问题，我通过传递样式道具将height: inherit属性从我的容器发送给了我的孩子。

我的容器： 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>
      );
    }
  }

然后在我的孩子 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>
      );
    }
  }

以这种方式，首先通过在容器中使用div来由react-grid-layout定义高度，然后强制材料UI卡将其高度设置为等于其容器的高度，以便填充所有div如您所愿。

如何使用材质UI卡填充React Grid Layout项目

1 个答案: