Question

我用“ react”标签标记了这个问题，但是，我认为在这种情况下框架并不重要。

我有一个组件，其工作是显示一些孩子。该组件所做的全部工作就是显示一些样式-边框和背景-因此它只是一个盒子。

此框可以“动态”显示，因此不会指定静态高度-例如，可以为“ flex-grow：1”。

如何让孩子们完全填补这一部分？

这是我的盒子：

class Box extends Component {
  render() {
    return (
      <div className={"box " + this.props.className}>
        <h2>BOX</h2>
        <div>{this.props.children}</div>
      </div>
    );
  }
}

以下是其样式：

.box {
  border-width: 5px;
  border-color: black;
  border-style: solid;
  background-color: purple;
}

理想情况下，孩子只会设置“高度：100％”，但这将不起作用，因为Box并未定义任何高度。

一种解决方案是在放置“ {this.props.children}”的div上设置“ display：flex”。但是，这要求孩子使用“ flex-grow：1”-我认为这不是最好的解决方案，因为孩子不应该知道Box是如何实现的。这也使问题递归-我孩子的孩子再次需要使用flex-grow ...

//编辑这是一个示例：https://codesandbox.io/s/nervous-sunset-bvhjh

Box-content应该填充Box中的整个位置，但不能填充。如何实现？

Answer 1

您可以通过纯CSS实现这一点（通过这种方式，孩子无需知道父母的zoom: { // Boolean to enable zooming enabled: false, // Zooming directions. Remove the appropriate direction to disable // Eg. 'y' would only allow zooming in the y direction mode: 'y', }模式）：

    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        pan: {
            enabled: true,

            mode: 'x',

            speed: 1
        },

        zoom: {
            enabled: false,                     
            mode: 'y',
        }
    }
});

通过设置所有子using (SPSite site = new SPSite("http://sp/sites/jerry")) { using (SPWeb web = site.OpenWeb()) { var list = web.Lists.TryGetList("TestList"); var item = list.GetItemById(1); var eventDescField = list.Fields.GetFieldByInternalName("Parameters"); var eventDesc = item[eventDescField.Id]; var eventDescText = eventDescField.GetFieldValueAsHtml(eventDesc); SPList word = (SPDocumentLibrary)web.Lists["Jerrydoc"]; string destUrl = word.RootFolder.Url + "/" + "MyWord8" + ".doc"; // Encoding the document to UTF8 format byte[] byteArray = Encoding.UTF8.GetBytes((eventDescText.ToString())); SPFile destFile = word.RootFolder.Files.Add(destUrl, byteArray, true); } }的样式。

一个codesandbox来查看结果

子级可以填充的组件

1 个答案: