Question

在第一次渲染中，对象就像这样

{
  behindPosition: null,
  chipBet: undefined,
  chipSelectedId: null,
  mainPosition: 4,
  sitBehind: (),
  submitbetBehind: bound componentDidUpdate(),
  timer: false
}

如您所见，几乎所有道具都是null或undefined

现在视图中有一个按钮

<button id={`playerBehind${position}`}
        onClick={this._enclosingFunctions}>Bet Behind</button>

单击该按钮后，对象会通过添加更多道具来更改，因此：

{
    behindPosition: 4,
    mainPosition: 1,
    chipSelectedId: null,
    timer: true,
    nickname: "omega",
    refPosition: 4,
    balance: 10000,
    action: "",
    onGame: true,
    betAmount: 0,
    simpleBetAmount: 0,
    message: "",
    lastBet: 0,
    buttons: [],
    position: 1
}

我录制了video，因为我们正在使用socket.io，因此您可以在视频中的右侧浏览器中重现该错误。

如您所见，两个视图中都有一个Bet Behind按钮，一旦您点击左侧屏幕上的按钮，就会在右侧屏幕的每个位置呈现相同的按钮，这不应该是正在发生。我需要该按钮才能只显示您在视频开头看到它的位置。道具behindPosition是您点击按钮后的位置。

所以，我需要的是在mainPosition与refPosition相同的位置看到该按钮，现在没有发生，应用程序没有考虑到任何内容，它只是在每个点上渲染按钮。按点我的意思是视图中的白色圆圈为7.因此可能有7个mainPosition，只有当mainPosition是匹配项refPosition时，才会显示按钮/ p>

现在，我的方式就是我的代码：

class BetBehindSpot extends Component {

  static propTypes = {
    'sitBehind'       : React.PropTypes.func,
    'behindPosition'  : React.PropTypes.number,
    'mainPosition'    : React.PropTypes.number,// position of the spot owner (main player)
    'refPosition'     : React.PropTypes.number,
  }

  constructor (props) {
    super(props);
  }

  render () {
    console.log('on render', this.props);
    const position = this.props.mainPosition;
    const behindPosition = this.props.behindPosition;
    let displayButton;
    if (behindPosition) {
      document.getElementById(`betbehind-spot${behindPosition}`).style.display = 'block';
    } else if (behindPosition !== position) {
      displayButton = (
        <button id={`playerBehind${position}`}
             className="betbehind-button" onClick={this._enclosingFunctions}>
          <span>Bet Behind</span>
        </button>
      );
    } else {
      displayButton = null;
    }

    return (
      <div>
        {displayButton}
      </div>
    );
  }

  _enclosingFunctions = () => {
    this._sitBehind();
  }

  _sitBehind = () => {
    if (!this.props.refPosition) {
      this.props.sitBehind();
    }
  }
}

那么，您有什么建议？

仅当对象中的2个属性与

0 个答案: