Question

我想基于某些条件使用javascript添加指向图像的链接并做出反应。

我要做什么？

我有移动和桌面图像。

在移动图片下，我有文字说切换到移动如果用户当前的网址与mobile_url不匹配，则可以点击。如果用户当前的URL与mobile_url匹配，则该文本将为“当前版本”，并且不可点击。

在桌面图片下，我有文字说切换到桌面，然后如果用户当前的网址与desktop_url不匹配，则可以点击如果用户的当前URL与desktop_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>
       );
   }

现在我想做的是单击文本并将其切换到移动设备，并将其切换到桌面，并具有指向URL的链接。同样，我希望拥有指向移动设备和桌面设备的图像的链接，并应根据相同的条件（如文本具有）进行点击。

因此对于移动图像，如果当前URL与mobile_url相同，则该图像不可单击。如果当前网址与mobile_url不匹配，则可以点击图片并将其重定向到mobile_url

，对于桌面图像，如果current_url与desktop_url相同，则该图像不可单击。如果当前网址与desktop_url不匹配，则可以点击图片并将其重定向到desktop_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>
       );
   }

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

Answer 1

在您退货之前，我将决定呈现什么组件。

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

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

如何使用打字稿根据某些条件向图像添加链接并做出反应？

1 个答案: