通过添加React.js的项目数来更改div元素的高度

Question

我正在使用React.js创建一个应用程序。我有项目清单。项目列表是可编辑的。

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

图片

如果项目数减少到3，则应缩短标题元素（建议和常见问题）的高度。如果增加到5，则高度应加宽。

如何实现此功能？我尝试使用内联样式，但失败了。

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

index.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: 1和flex: 5设置divs来获得正确的宽度。

然后，我将添加div环绕效果QuestionList，CreateItem这样您就可以使这些效果垂直显示/在列中显示（带有display: flex和flex-direction: column样式）。