创建应用程序将在弹出窗口中打开的链接

2020-11-17 08:00:00 · 飞浪

这样，用户就可以继续使用您的应用并访问外部内容。在本指南中，您将了解如何创建应用程序可以有条件地在弹出窗口中打开的链接。

介绍

为了留住应用用户，您可能希望通过超链接向他们显示来自外部来源的内容，而无需让他们离开应用。在这种情况下，您可以实现一个 React 组件，以弹出窗口的形式打开外部链接。这样，用户就可以留在您的应用上，同时仍可访问外部内容。在本指南中，您将学习如何创建应用可以有条件地在弹出窗口中打开的链接。

执行

这个想法是创建一个包装器组件，为传递给它的任何链接创建一个URL 对象，并通过检查链接的主机名来决定它是外部链接还是内部链接。对于内部链接，它只会呈现该链接，而在所有其他情况下，它会在弹出窗口中呈现一个iframe ，显示该外部链接的来源。

设置

在一个空的 React 项目中，安装 React-Router-Dom

      npm i react-router-dom

此示例将使用 React-Bootstrap 的模式组件，而不是创建自定义模式组件。您可以创建自定义模式组件或使用您熟悉的任何其他 UI 库。

安装 React Bootstrap 和 Bootstrap。

      npm i react-bootstrap bootstrap

在根文件夹中创建一个名为environment.js的文件，并添加一个存储应用程序主机名的常量。

      export const HOSTNAME="localhost";

由于您的应用处于本地开发阶段，因此所有路由都将相对于localhost。但是，当您将此应用推送到生产环境时，您应该在此处输入应用的域名。

创建包装器组件

为您的链接创建一个名为LinkWrapper的包装器组件，该组件将链接作为props接收并为该链接生成完整的URL 对象。如果 URL 的主机名与您环境中的HOSTNAME相同，则只需呈现该链接即可。如果是外部网站，请使用指向外部链接的iframe从 React Bootstrap 呈现模态组件。以下是LinkWrapper组件的完整代码。

      import React,{useState} from 'react';
import { Modal, Button } from "react-bootstrap";
import {HOSTNAME} from './environment';

export default function LinkWrapper({link}) {    
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const url = new URL(link)
    console.log(url)
    if (url.hostname === HOSTNAME ) return <a target="_blank" href={link}>{link}</a>
    else
    return (
      <>
        <Button variant="primary" onClick={handleShow}>
          Open Link
        </Button>
  
        <Modal show={show} onHide={handleClose}>
            <Modal.Title>Link Popup</Modal.Title>
          <Modal.Body><iframe src={link} style={{width:'100%',height:'400px'}}/></Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
    

您可以按照官方文档中的示例了解如何使用 React-Bootstrap 模式：https://react-bootstrap.netlify.app/components/modal/#modals。

创建相对链接

为了测试本地链接，您需要为应用创建相对路由。创建一个简单的About组件，如下所示。

      import React from 'react'

export const About = () => {
    return (
        <div>
            <h1>This is the about component</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae distinctio provident vero rerum expedita earum eius sint quos dolorum illum temporibus quidem in ipsa, ad beatae, repudiandae facilis aliquid?</p>
        </div>
    )
}
    

在App.js中，添加路由并渲染上一节中创建的LinkWrapper组件。

      import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import LinkWrapper from './LinkWrapper';
import {
  BrowserRouter,
  Route,
} from "react-router-dom";
import { About } from './About';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <LinkWrapper/>
        <Route path="/about">
          <About/>
        </Route>
      </BrowserRouter>
    </div>
  );
}

export default App;
    

为了测试它，请创建两个链接，一个外部链接和一个内部链接，如下所示。

      const external_link="https://reactrouter.com/web/guides/quick-start";
  const internal_link="http://localhost:3001/about"
    

external_link应在弹出窗口中打开，而internal_link应呈现为常规链接。将这两个链接逐一作为props传递给LinkWrapper组件。

      <LinkWrapper link={external_link}/>

LinkWrapper组件会呈现一个“打开链接”按钮，该按钮会在弹出窗口中打开链接。将链接属性更改为internal_link只会呈现在新选项卡中打开的链接。

结论

创建此类组件的底层概念是条件渲染。您可以使用相同的概念在弹出窗口中打开注册表单或在应用中渲染外部图像。您可以在以下情况下使用此方法：根据用户在应用上花费的时间向用户显示某些内容，而无需创建会话，从而允许他们通过打开登录表单弹出窗口登录以访问更多内容。您还可以在 iframe 内的弹出窗口中打开外部视频，该视频可用于视频流应用中，向用户显示快速预告片和预告片。如果您有任何疑问，请随时通过CodeAlphabet与我联系。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

创建应用程序将在弹出窗口中打开的链接

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React,{useState} from 'react'; import { Modal, Button } from "react-bootstrap"; import {HOSTNAME} from './environment'; export default function LinkWrapper({link}) { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); const url = new URL(link) console.log(url) if (url.hostname === HOSTNAME ) return <a target="_blank" href={link}>{link}</a> else return ( <> <Button variant="primary" onClick={handleShow}> Open Link </Button> <Modal show={show} onHide={handleClose}> <Modal.Title>Link Popup</Modal.Title> <Modal.Body><iframe src={link} style={{width:'100%',height:'400px'}}/></Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handleClose}> Close </Button> </Modal.Footer> </Modal> </> ); }

import React from 'react' export const About = () => { return ( <div> <h1>This is the about component</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae distinctio provident vero rerum expedita earum eius sint quos dolorum illum temporibus quidem in ipsa, ad beatae, repudiandae facilis aliquid?</p> </div> ) }

import 'bootstrap/dist/css/bootstrap.min.css'; import './App.css'; import LinkWrapper from './LinkWrapper'; import { BrowserRouter, Route, } from "react-router-dom"; import { About } from './About'; function App() { return ( <div className="App"> <BrowserRouter> <LinkWrapper/> <Route path="/about"> <About/> </Route> </BrowserRouter> </div> ); } export default App;