css - 通过添加元素 React.js 的数量来更改 div 元素的高度

Question

我正在使用 React.js 制作一个应用程序。我有一个元素 list 。元素列表是可编辑的。

我想在元素列表旁边添加一个 title 元素，并且 title 元素的高度应该随着元素数量的增加或减少而改变。

图片

如果元素数量减少到 3，标题元素(建议和常见问题)的高度应该缩短。如果增加到5，高度应该加宽。

我怎样才能实现这个功能？我尝试使用内联样式但我失败了..

<div className="titleElement" style={height: this.state.questionItem.length * 20px }></div>

索引.js

export default class List extends React.Component {
constructor(props){
    super(props);
    this.state={
        questionItem
    };
}

createItem(item){
    this.state.questionItem.unshift({
        item : item,
    });
    this.setState({
        questionItem : this.state.questionItem
    });
}

findItem(item) {
    return this.state.questionItem.filter((element) => element.item === item)[0];
}

toggleComplete(item){
    let selectedItem = this.findItem(item);
    selectedItem.completed = !selectedItem.completed;
    this.setState({ questionItem : this.state.questionItem });
}

saveItem(oldItem, newItem) {
    let selectedItem = this.findItem(oldItem);
    selectedItem.item = newItem;
    this.setState({ questionItem : this.state.questionItem });
    console.log(this.state.questionItem)
}

deleteItem(item) {
    let index = this.state.questionItem.map(element => element.item).indexOf(item);
    this.state.questionItem.splice(index, 1);
    this.setState({ questionItem : this.state.questionItem });
}

render() {
    return (
    <div className="list">
    <div className="titleElement" style={height: this.state.questionItem.length * 20px }></div>
    <QuestionList questionItem={this.state.questionItem} deleteItem={this.deleteItem.bind(this)}  saveItem={this.saveItem.bind(this)} toggleComplete={this.toggleComplete.bind(this)} />
    <CreateItem questionItem={this.state.questionItem} createItem={this.createItem.bind(this)} />
    </div>);
}
}

Answer 1

我认为您手动完成了太多工作。你应该看看flexbox并让 CSS 自动为您处理高度调整。最终结果会是这样的(还没有测试过，只是给你一个概念性的想法):

render() {
    return (
    <div className="list" style={{"display": "flex";}}>
        <div className="titleElement" style={{"flex": 1}}></div>
        <div style={{"flex": 5; "display": "flex"; "flex-direction": "column"}}>
            <QuestionList questionItem={this.state.questionItem} deleteItem={this.deleteItem.bind(this)}  saveItem={this.saveItem.bind(this)} toggleComplete={this.toggleComplete.bind(this)} />
            <CreateItem questionItem={this.state.questionItem} createItem={this.createItem.bind(this)} />
        </div>
    </div>);
}

外层 div 设置了 display: flex 来启用 flex box，然后你可以使用 flex: 1 和 flex: 5 在子 div 中设置以获得正确的宽度。

然后我会在 QuestionList 和 CreateItem 周围添加包装 div ，这样您就可以使它们垂直/按列显示(使用 display: flex 和 flex-direction: column 样式)。