Reactjs react中的条件渲染下载按钮

我有一个下载按钮，用户可以从中下载资产。但我希望只有经过身份验证的用户才能下载。如果用户没有经过身份验证，单击下载按钮，我想向他们显示一个带有登录按钮的模式。我有一个模态组件。我正在使用React。 请帮帮我

正在从firebase获取当前经过身份验证的用户

const {currentUser} = useAuth();

这是我下载按钮的代码

  <a className="bg-secondary text-white font-bold py-3 
     px-5 rounded text-2xl focus:outline-none mt-3 block w-48" href="YOUR_URL">
  <i className="animate-bounce fas fa-arrow-down mr-2"></i>
    Download
</a>

模态代码：

import React from "react";
import { useState } from "react";

export default function Modal() {
  const [showModal, setShowModal] = useState(true);
  console.log('modal');
  return (
    <>
      {showModal ? (
        <>
          <div
            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
            onClick={() => setShowModal(false)}
          >
            <div className="relative w-auto my-6 mx-auto max-w-3xl">
              {/*content*/}
              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                {/*header*/}
                <div className="flex items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t">
                  <h3 className="text-3xl font-semibold">
                    Modal Title
                  </h3>
                  <button
                    className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
                    onClick={() => setShowModal(false)}
                  >
                    <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
                      ×
                    </span>
                  </button>
                </div>
                {/*body*/}
                <div className="relative p-6 flex-auto">
                  <p className="my-4 text-gray-600 text-lg leading-relaxed">
                    I always felt like I could do anything. That’s the main
                    thing people are controlled by! Thoughts- their perception
                    of themselves! They're slowed down by their perception of
                    themselves. If you're taught you can’t do anything, you
                    won’t do anything. I was taught I could do everything.
                  </p>
                </div>
                {/*footer*/}
                <div className="flex items-center justify-end p-6 border-t border-solid border-gray-300 rounded-b">
                  <button
                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1"
                    type="button"
                    style={{ transition: "all .15s ease" }}
                    onClick={() => setShowModal(false)}
                  >
                    Close
                  </button>
                  <button
                    className="bg-green-500 text-white active:bg-green-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
                    type="button"
                    style={{ transition: "all .15s ease" }}
                    onClick={() => setShowModal(false)}
                  >
                    Save Changes
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
        </>
      ) : null}
    </>
  );
}

从“React”导入React；
从“react”导入{useState}；
导出默认函数Modal（）{
const[showmodel，setshowmodel]=useState（true）；
console.log（'modal'）；
返回(
{showModal(
设置显示模式（错误）}
>
{/*内容*/}
{/*头*/}
情态标题
设置显示模式（错误）}
>
×
{/*正文*/}

我总觉得我能做任何事，这是最主要的
人们被思想控制的东西——他们的感知
他们自己！他们被自己对事物的感知减慢了速度
他们自己。如果你被教导你什么都做不了，你会
我什么都不会做。我被教导我什么都能做。

{/*页脚*/}
设置显示模式（错误）}
>
接近
设置显示模式（错误）}
>
保存更改
)：null}
);
}

您可以使用

按钮而不是
a
，并在单击按钮时使用onClick检查当前用户是否存在

这是最终代码：

function x {

const {currentUser} = useAuth();

const downloadAssets = () => {
   if(currentUser){
      window.open("url assets here", '_blank', 'noopener,noreferrer')
   }else{
     // Open modal here
     alert("User not authenticated"); 
   }
}
return {
<>
  ...
  <button onClick={downloadAssets}><i className="animate-bounce fas fa-arrow-down mr-2"></I>Download</button>
  ...
</>
}

函数x{
const{currentUser}=useAuth（）；
const downloadAssets=（）=>{
如果（当前用户）{
window.open（“此处的url资源”、“空白”、“noopener、noreferrer”）
}否则{
//打开这里
警报（“用户未通过身份验证”）；
}
}
返回{
...
下载
...
}
你好，Adrian，if语句工作正常，但else语句不是打开模式。我喜欢这个else{return}模式代码。我不知道我在哪里出错。请指出。我想我找到了解决方案。谢谢