Question

我在Meteor中遇到了React问题。

所以我在我的React课程中有这些行＆＃39;退货声明

{this.renderRegisterButton()}

相应的功能是这个

  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>

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

出现这种情况的原因是什么？这不是发生这种情况的唯一地方，但最容易记录。

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

Answer 1

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

在我renderRegisterButton语句的return之上，我也有了这一行

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

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

用

替换该行

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

完全解决了我的问题！

React不更新元素，但创建具有相同reactid的新元素

1 个答案: