4

我正在使用 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"),如下图所示:

显示问题

那么我该如何解决呢?

感谢您的帮助。

4

1 回答 1

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通缉。

于 2018-12-21T19:34:56.660 回答