时间戳

首页 > 解决方案 > React JS 条件渲染，如 Eval

reactjs - React JS 条件渲染，如 Eval

问题描述

我正在创建一个动态按钮。问题是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,
  });
};

标签： reactjs

解决方案

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

  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>) }：

推荐阅读