javascript - JS 用 if 打开标签并在另一个标签中关闭它

Question

我有一个从 map 函数获取索引的 react 组件，我试图在索引为偶数时打开行标记的 div，并在索引为奇数时关闭它

  render() {
    return (
        {this.props.index%2===0 && (<div className="row mt-1">)} //new row
        <div className="col-1">{this.props.title}</div>
        <div className="col-5">
          <ProgressBar
            variant={this.props.color}
            now={this.props.now}
            max={this.props.max}
            label={this.props.label}
          />
        </div>
        {this.props.index%2===1 &&  (</div>)} //end of the row
    );
  }

这段代码无法编译: enter image description here

重点是每一行都包含两个ProgressBar。正确的做法是什么？

Answer 1

您需要一次性处理整个元素，而不是标签。

如果将其分解为函数，这会更容易。

您可以在数组上使用 splice 一次抓取两个项目。

例如

function createRow(elements) {
    return (
        <div>
            {elements.map(createProgressBar)}
        </div>
    );
}

function createProgressBar(element) {
    return (
        <div>{element.index}</div>
    );
}

function render() {
    // ...
    const rows = [];
    while (myArray.length) {
        const thisRow = myArray.splice(0,2);
        rows.push(createRow(thisRow));
    }
    return rows;
}