通过添加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框，然后您可以在子divs使用flex: 1和flex: 5设置来获得正确的宽度。

然后，我将在QuestionList和CreateItem周围添加换行div ，以便可以使它们垂直/在列中display: flex （ display: flex和flex-direction: column样式）。

Answer 2

我同意user1370384的观点，您正在手动做很多工作，这是一篇讨论如何将内联样式作为对象Reactjs的正确方法-正确设置内联样式的文章 。

但是，如果您想采用原始方法，则反引号又称为ES6模板文字可能是如下解决方案。 （ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals ）

render() {
    return (
    <div className="list">
        <div className="titleElement" style={{'height': `${this.state.questionItem.length * 20}px` }}>

        </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>
    );
}