Question

我正在创建一个仅在某个参数为true时才会显示的按钮。我最初是用jQuery和React编码的，但是我需要将其更改为仅React。这是jQuery的代码：

currentGame() {

    if (gameInfo.publicPlayersState.find(player => player.userName === userInfo.userName)) {
      $(this.inCurrentGame).modal('show');
    } else {
     return
    }

    function currentGameFnctn() {
        window.location.hash = `/${game._id}`;
    }



    return (
        <React.Fragment>
            <div
                ref={c => {
                    this.inCurrentGame = c;
                }}
            >
                <button className="ui primary button currentGame-button" onClick={this.currentGameFnctn}>
                    Current Game
                </button>
            </div>
        </React.Fragment>
    );
}

此代码检查一个人是否坐在游戏中，如果是，则在其个人资料中应显示一个按钮，允许其他查看其个人资料的人进入该游戏。如果此人不在游戏中，则该按钮不应出现。

我如何将其更改为React？

Answer 1

您可以使用&&运算符使用conditional rendering来实现它：

currentGame() {
    function currentGameFnctn() {
        window.location.hash = `/${game._id}`;
    }

    return (
        <React.Fragment>
            <div
                ref={c => {
                    this.inCurrentGame = c;
                }}
            >
                {player.userName === userInfo.userName && 
                    <button className="ui primary button currentGame-button" onClick={this.currentGameFnctn}>
                        Current Game
                    </button>
                }
            </div>
        </React.Fragment>
    );
}

如何将jQuery模态更改为React模态？

1 个答案: