Question

首先，我不得不说我是React的新手，而且我在某些需要帮助的地方陷入困境。我正在开发一个基本上是日历应用的网络项目。

这个想法很简单：我们有一个应用程序，显示未来一年的日历。它都是单页面的，因此我使用了react-scroll组件来简化应用程序的使用。两侧是两个菜单 - 左边是菜单，有月份（1月，2月，...），右侧有菜单，有天（1,2，...）。因此，当用户点击3月时，让我们说，页面滚动到那个月 - 同样可以持续数天。

在父渲染方法中，我包含了两个菜单组件：

父组件：

<MonthsMenu monthsArray={ this.state.monthsArray } onMonthActive={ this.onMonthActive.bind(this) } />

<DaysMenu month={ this.state.month } />

对于MonthsMenu组件，我传递具有所有月份和函数onMonthActive的状态数组。这是当用户滚动到某个元素时调用的函数。

父对象中的

onMonthActive函数：

onMonthActive(to) {

    var currentDate = moment(moment(to, "MMMM YYYY").unix());
    var currentDate2 = moment.unix(currentDate);

    var daysInCurrentMonth = currentDate2.daysInMonth();

    this.setState({
      month: currentDate2,
      daysInMonth: daysInCurrentMonth
    });
  }

这是左侧菜单（MonthsMenu组件）渲染：

render() {

    const sideMenu = this.props.monthsArray.map((month, i) => {
      var monthString = month.format("MMMM YYYY");
      var monthStringArray = monthString.split(' ');

      var currentMonth = month;

      return (
        <li key={ monthString } >
          <Scroll.Link
            activeClass="active"
            to={ monthString }
            offset={-50}
            spy={true}
            smooth={true}
            duration={500}
            onSetActive={this.props.onMonthActive}>
              { monthStringArray[0].substring(0, 3) }
          </Scroll.Link>
        </li>
      );
    });

    return (
      <div className="months">
        <ul>
          { sideMenu }
        </ul>
      </div>
    );
  }

因此，想法是当用户滚动到某个元素时，通过onMonthActive通知父级并将month状态设置为我们滚动的当前日期。稍后在DaysMenu（右侧菜单）组件中使用此month状态来生成月中的确切天数。

DaysMenu组件渲染：

    render() {

    var currentMonth = moment(this.props.month);
    var daysInMonth = currentMonth.daysInMonth();

    var days = [];
    for (var i = 1; i <= daysInMonth; i++) {
      days.push(i);
    }

    const sideMenu = days.map((day, i) => {

      var anchor = this.props.month.format("MMMM YYYY") + ' ' + day;

      return (
        <li key={ anchor } id={ anchor + ' ' + i}>
          <Scroll.Link
            activeClass="active"
            to={anchor}
            offset={-60}
            spy={true}
            smooth={true}
            duration={500}
            onSetActive={this.dayActive}>
              { day }
          </Scroll.Link>
        </li>
      );
    });

    return (
      <div className="days">
        <ul>
          { sideMenu }
        </ul>
      </div>
    );
  }

问题

按月滚动就像应该的那样。问题是按天滚动仅适用于显示的第一个月。如果我将console.log放在父onMonthActive函数中，我可以看到它只在我第一个月做出反应时被调用，而在进一步滚动时不再被调用。不应该这样做，因为我在onMonthActive中使用setState导致组件重新渲染并创建一个新的DaysMenu？

很抱歉很长的帖子，我希望有人知道解决方案。

修改

Calendar.jsx MonthsMenu.jsx

DaysMenu.jsx

仅第一次反映组件渲染

0 个答案: