React 不更新元素，而是创建具有相同 reactid 的新元素答案

【问题标题】：React not updating element, but creating new one with same reactidReact 不更新元素，而是创建具有相同 reactid 的新元素
【发布时间】：2015-12-14 11:11:29
【问题描述】：

我在 Meteor 中的 React 遇到了一些问题。

所以我的 React 类的返回语句中有这些行

{this.renderRegisterButton()}

对应的函数是this

  renderRegisterButton: function() {
    if (Meteor.user()) {
      if (this.data.tournament.ongoing || this.data.tournament.date_finished) {
        return ''
      } else {
        activeTournament = Meteor.players.getActiveTournament(Meteor.user()._id);
        if (activeTournament) {
          if (activeTournament._id == this.data.tournament._id) {
            var playerStatus = Meteor.tournaments.findTournamentStatus(this.data.tournament._id);
            if (playerStatus.status == 2) {
              return <div className="alert alert-success alert-checkedin" role="alert">You have succesfully checked in! Hang on tight, the tournament will start soon!</div>
            }
            else if (playerStatus.status == 1 && this.data.tournament.checkin_open) {
              return <button type="button" className="btn btn-default" onClick={this.attend}>Check in</button>
            }
            else if (playerStatus.status == 1 && !this.data.tournament.checkin_open) {
              if (playerStatus.status == 1) {
                return <button type="button" className="btn btn-default" onClick={this.removeAttend}>Withdraw</button>
              } else if (playerStatus.status != 1) {
                return <button type="button" className="btn btn-default" onClick={this.attend}>Sign up</button>
              }
            }
          } else {
            return (
              <div className="alert alert-warning" role="alert">
                <strong>Warning!</strong> You're still active in another tournament, so you can't participate in this one. Finish your other tournament first
                before registering.
              </div>
            )
          }
        } else {
          if (Meteor.players.hasGameTag(Meteor.user()._id, this.data.tournament.game_id)) {
            return <button type="button" className="btn btn-default" onClick={this.attend}>Sign up</button>
          } else {
            return this.noGameTag();
          }
        }
      }
    }
  },

所以，当页面被渲染并且锦标赛签到阶段打开并且玩家还没有签到时，我得到了这个 HTML：

<button type="button" class="btn btn-default" data-reactid=".0.1.1.0.3.0.0.2">Check in</button>

这是正确的。但是当玩家按下签入按钮时，他会正确签入，但我显示的 HTML 不会改变签入按钮。相反，它只是将新结果复制为一个新元素，而不对我的旧元素做任何事情。

<div class="alert alert-success alert-checkedin" role="alert" data-reactid=".0.1.1.0.3.0.0.2">You have succesfully checked in! Hang on tight, the tournament will start soon!</div>
<button type="button" class="btn btn-default" data-reactid=".0.1.1.0.3.0.0.2">Check in</button>

所以我最终得到了一个具有相同 reactid 的元素，而它应该删除了第一个按钮并在我的 html 中用我的新 div 替换它。

发生这种情况的任何原因？这不是唯一发生这种情况的地方，但却是最容易记录的地方。

可能只是我没有完全掌握 React 的做事方式，所以请在需要的地方纠正我！

【问题讨论】：

标签： javascript meteor reactjs

【解决方案1】：

我设法解决了我自己的问题，但这与我在这里描述的问题无关。

在return 语句中我的renderRegisterButton 正上方，我也有这一行

<p dangerouslySetInnerHTML={{__html: this.data.tournament.description}}></p>

我的锦标赛描述是一些 HTML 行，其中还包含一些 <p> 标签。由于不允许嵌套 <p> 标签，这成功地搞砸了我的整个反应生态系统。

替换为

<div dangerouslySetInnerHTML={{__html: this.data.tournament.description}}></div>

完全解决了我的问题！

【讨论】：