像Eval一样反应JS条件渲染

Question

我正在创建一个动态按钮。问题在于CurrentPage和KeyIndex在渲染之前已经进行了评估。

private DisplayButtons = () => {
  let cont = [];
  let startAt, endAt;
  startAt = this.state.StartAt;
  endAt = this.state.EndAt;
  if (this.state.CurrentPage == 1) {
    endAt = endAt =
      this.state.TotalRecord / this.state.PageSize >= 5
        ? 5
        : Math.ceil(this.state.TotalRecord / this.state.PageSize);
  }
  for (var i = startAt; i <= endAt; i++) {
    cont.push(
      <li onClick={this.onPagerClick} data-id={i} className="sui-pager-element">
        <a
          className={
            this.state.CurrentPage == this.state.KeyIndex
              ? 'sui-selected sui-pager-element'
              : 'sui-pager-element'
          }
        >
          {i}
        </a>
      </li>,
    );
  }

  this.setState({
    DataButtons: cont,
  });
};

Answer 1

很难理解这个孤立的代码。但是，我提出一些意见，希望可以改善其功能。

1. 我知道DisplayButtons是类组件的内部函数。如果是这种情况，则应使用小写形式将其称为displayButtons。
2. 您可以这样重构：

    const { startAt, CurrentPage, TotalRecord, PageSize, KeyIndex } = this.state;`
    let { endAt } = this.state;

1. 在for循环中最好使用FP。还不是很清楚。
2. cont应该是对象数组，而不是html。然后，在渲染器中执行以下操作：{ DataButtons.map(b => <ButtonView>) }。