Reactjs 如何使用typescript和react根据某些条件向图像添加链接？

我想使用javascript和react根据某些条件向图像添加一个链接

我想做什么

我有手机和桌面图像

在手机图像下，我有一条短信，上面写着切换到手机和 如果用户当前url与移动url不匹配，则可单击。 如果用户当前url与移动url匹配，则文本将为“当前版本”，不可单击

在“桌面图像”下，我有一条文字，上面写着“切换到桌面”和 如果用户当前url与桌面url不匹配，则可单击 如果用户当前url与桌面url匹配，则文本将为“当前版本”，并且不可单击

下面是我的代码

function Parent () {
    const currentUrl = window.location.origin + '/';
    return (
        <div className="Wrapper">
            <Dialog>
                <span>Select Version</span>
                <div className="container">
                    <div className="block">
                        <span>Mobile</span>
                        <div className="image_wrapper"> // want to add a link here too
                            <img src={mobile} width={50} />
                        </div>
                        <span>
                            {current_url === mobile_url ? (
                                'Current version'
                            ) : (
                                <a href={mobile_url}>Switch to mobile</a>
                            )}
                        </span>
                    </div>
                    <div className="block">
                        <span>Desktop</span>
                        <div className="image_wrapper"> //want to add a link here too
                            <img src={desktop} width={50} />
                        </div>
                        <span>
                            {current_url === desktop_url ? (
                                'Current version'
                            ) : (
                                <a href={desktop_url}>Switch to desktop</a>
                            )}
                        </span>
                    </div>
                </div>
           </div>
       );
   }

函数父级（）{
const currentUrl=window.location.origin+'/'；
返回(
选择版本
可移动的
//想在这里添加一个链接吗
{当前url==移动url(
“当前版本”
) : (
)}
桌面
//想在这里添加一个链接吗
{当前url==桌面url(
“当前版本”
) : (
)}
);
}

现在我想做的是，切换到手机和桌面的文本可以点击，并且有一个指向url的链接。同样，我想有链接到移动和桌面的图像，应该是可点击的基础上相同的条件，如文本

所以对于移动图像，若当前url和移动url相同，那个么图像是不可点击的。如果当前url与移动url不匹配，则可以单击图像并重定向到移动url

对于桌面图像，若当前url和桌面url相同，则图像不可单击。如果当前url与桌面url不匹配，则可以单击图像并重定向到桌面url

我该怎么做呢。有人能帮我吗。谢谢

编辑：

我试过像下面这样，但没有看到图像

import desktop from '../image/desktop.svg';
import mobile from '../image/mobile.svg';

interface Props {
    src: any; //what should be the type here
    width: any; //what should be the type here
}
function RenderImage({src, width}: Props) {
    return (
        <div className="image_wrapper">
            <img src={src} width={width}/>
        </div>
    );
}

function Parent () {
    const currentUrl = window.location.origin + '/';
    return (
        <div className="Wrapper">
            <Dialog>
                <span>Select Version</span>
                <div className="container">
                    <div className="block">
                        <span>Mobile</span>
                        {current_url === mobile_url ? (
                            <a href={mobile_url}>
                                <Image src={mobile} width={50}/>
                            </a> ): (
                                <Image src={mobile} width={50} />
                            )
                        }
                        <span>
                            {current_url === mobile_url ? (
                                'Current version'
                            ) : (
                                <a href={mobile_url}>Switch to mobile</a>
                            )}
                        </span>
                    </div>
                    <div className="block">
                        <span>Desktop</span>
                        {current_url === desktop_url ? (
                            <a href={desktop_url}>
                                <Image src={desktop} width={width}/>
                            </a> ) : (
                                <Image src={desktop} width={width} />
                        }
                        <span>
                            {current_url === desktop_url ? (
                                'Current version'
                            ) : (
                                <a href={desktop_url}>Switch to desktop</a>
                            )}
                        </span>
                    </div>
                </div>
           </div>
       );
   }

从“../image/desktop.svg”导入桌面；
从“../image/mobile.svg”导入mobile；
界面道具{
src:any；//这里应该是什么类型
宽度：any；//此处的类型应该是什么
}
函数呈现（{src，width}:Props）{
返回(
);
}
函数父级（）{
const currentUrl=window.location.origin+'/'；
返回(
选择版本
可移动的
{当前url==移动url(
): (
)
}
{当前url==移动url(
“当前版本”
) : (
)}
桌面
{当前url==桌面url(
) : (
}
{当前url==桌面url(
“当前版本”
) : (
)}
);
}

---

这很好，但是在这种情况下，src和width的类型应该是什么呢？谢谢。

在您返回之前，我会决定渲染什么组件

export default function Parent() {
    const pathname = window.location.pathname;
    const customElement = pathname === 'your mobile url'? // Check if matches
        <a href={mobile_url}>Switch to mobile</a> :  // if so return this one
        <a href={desktop_url}>Switch to desktop</a> //else this

    return (
        <div className="Wrapper">
            <Dialog>
                <span>Select Version</span>
                <div className="container">
                    <div className="block">
                        <span>Mobile</span>
                        <div className="image_wrapper"> 
                            <img src={mobile} width={50} />
                        </div>
                  <span>{customElement}</span>
                        
                    </div>
                </div>
               </Dialog>
              </div>
       );
   }

导出默认函数父函数（）{
const pathname=window.location.pathname；
const customElement=pathname==“您的移动url”？//检查是否匹配
：//如果是，请返回此项
//除此之外
返回(
选择版本
可移动的
{customElement}
);
}

---

如果您希望根据当前路径显示不同的图像，可以对图像执行相同的操作。

谢谢我在问题中添加了我尝试过的内容。您知道我尝试过的答案中src使用的类型吗？