@x-edu/outer-link

概述

用于处理外链跳转的组件。它提供了白名单检查，继续访问、停止访问按钮，以及对非法内容的处理功能。

安装

npm install @x-edu/outer-link

使用

import React from 'react'
import OuterLink from '@x-edu/outer-link'
import Logo from './img/logo.png'

export default function Demo() {
  const whiteList = [
    'smartedu.cn', // 泛域名
    'www.baidu.com' // 完整域名
  ]

  return (
    <>
      <OuterLink 
        platformName='国家中小学智慧教育平台'
        logo={Logo}
        url="https://basic.smartedu.cn/sedu/detail?contentType=assets_video&contentId=52231773-110c-4f86-9db9-278dd2b7ba5c&catalogType=sedu&subCatalog=dsxx" 
        whiteList={whiteList}
      />
      <OuterLink 
        platformName='国家中小学智慧教育平台'
        logo={Logo}
        url="https://basic.smartedu.cn/sedu/detail?contentType=assets_video&contentId=52231773-110c-4f86-9db9-278dd2b7ba5c&catalogType=sedu&subCatalog=dsxx" 
        whiteList={whiteList}
        showStop={false}
        isWhiteList={(_whiteList, host) => {
          console.log(_whiteList, host)
          // 即便当前链接在白名单中，也设置为非白名单（都会显示中间页）
          return false
        }}
      />
    </>
  )
}

API

参数	说明	类型	默认值
url	要跳转的链接，必填	string	-
logo	显示的logo	string	-
platformName	平台名称。您即将离开${platformName}，跳转到其他网站	string	''
showStop	是否显示“停止访问”按钮	boolean	true
whiteList	白名单，支持完整域名和泛域名	Array<string>	[]
isWhiteList	自定义判断链接是否在白名单内的回调。默认回调的处理逻辑为：如果 url 的域名在 whiteList 中，直接跳转到 url，否则显示中间页面	(whiteList: Array<string>, host: string) => boolean	-