Javascript React firebase login with basic if语句出现解析错误

如果用户未经授权访问我的某个页面，我想显示一条类似“请登录”的消息。我正在使用

useffect

，在我的渲染部分，我编写了如下代码，但它给了我解析错误

分析错误：相邻的JSX元素必须包装在封闭标记中。是否需要JSX片段…？

我做错了什么？下面是我的代码：

return ( 
    <div className="screens">
        {user ?  (
        <canvas
            ref={ref2}
            className="buildings" 
            width={800}
            height={100}
            onClick={e => {

            }}
        />
        <canvas
            ref={ref}
            className="gameScreen" 
            width={800}
            height={600}
            onClick={e => {

            }}
        />
        <canvas
            ref={ref_yazi}
            className="yazi" 
            width={800}
            height={100}
        />
        ) : (<div>Please login</div>)}
    </div>
  );

返回（
{用户(
{
}}
/>
{
}}
/>
)：（请登录）}
);

JSX内部条件也必须包装在一个封闭的标记中

只需将多个

canvas

元素包装成一个

片段（如错误所示）或一个div

{user ? ( 
   <> // or <React.Fragment> or a <div>
        <canvas
            ref={ref2}
            className="buildings" 
            width={800}
            height={100}
            onClick={e => {

            }}
        />
        <canvas
            ref={ref}
            className="gameScreen" 
            width={800}
            height={600}
            onClick={e => {

            }}
        />
        <canvas
            ref={ref_yazi}
            className="yazi" 
            width={800}
            height={100}
        /> 
   </>
)

{user}
//或者
{
}}
/>
{
}}
/>
)