@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 | - |