Reactjs 我如何使父级高度增加?
我正在创建一个文档上传系统,希望有所有已上传文档的行,最后一行是“添加另一个文档”行。当前,包含行的列表容器并没有扩展,而只是减少列表中项目的高度。相反,我尝试将父级高度展开以包含列表中的所有项目。感谢您的帮助Reactjs 我如何使父级高度增加?,reactjs,flexbox,Reactjs,Flexbox,我正在创建一个文档上传系统,希望有所有已上传文档的行,最后一行是“添加另一个文档”行。当前,包含行的列表容器并没有扩展,而只是减少列表中项目的高度。相反,我尝试将父级高度展开以包含列表中的所有项目。感谢您的帮助 import React, { Component } from 'react'; export class Upload extends Component { render() { return ( <div style={{
import React, { Component } from 'react';
export class Upload extends Component {
render() {
return (
<div style={{'height': '100vh', 'display': 'flex', 'justifyContent': 'center', alignItems: 'center'}}>
<div style={{'flex': 0.8, maxWidth: 800, flexGrow: 1, 'borderRadius': 10, 'boxShadow': '0px 0px 10px #82828240', 'paddingLeft': 50, 'paddingRight': 50, 'paddingTop': 100, 'paddingBottom': 100, display: 'flex', flexDirection: 'column'}}>
<div>
<h2>Document upload</h2>
<p>Some subtitle placeholder</p>
</div>
<hr />
<div style={{'display': 'flex','flexDirection': 'column', backgroundColor: 'red'}}>
<div style={{flex: 1, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
<div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
<div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
<div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
<div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
<div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
<div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
<div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
<div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
{/* <button type='button' style={{'flex': 1, flexShrink: 0, 'borderStyle': 'dashed'}} onClick={() => this.input.click()}/>
<input id='file-upload' type="file" style={{display: 'none'}} ref={(input) => this.input = input}/> */}
</div>
</div>
</div>
);
}
}
从“React”导入React,{Component};
导出类上载扩展组件{
render(){
返回(
文件上传
一些字幕占位符
{/*this.input.click()}/>
this.input=input}/>*/}
);
}
}
删除height:80%
并将li
更改为div
我添加的行越多,项目得到的越小,这是有道理的,但我正试图让父div增加高度。一秒钟后,将对其进行原型制作:)您使用- 使用
- s-inside有什么原因吗?没有原因,我一直在尝试其他方法,但没有尝试
- 中的
- 我正在使用HTML(删除和)对其进行原型制作,到目前为止它对我有效。如何展开列表中的项目?能否在父元素
- 周围加上边框,并显示展开项目时的屏幕截图?