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

Question

我正在创建一个仅在某个参数为真时才显示的按钮。我最初是用 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？

标签： javascriptjqueryreactjs

Answer 1

您可以使用条件渲染通过操作符来实现它&&：

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>
    );
}