Question

在我的反应应用程序中，当我点击外部链接时假设http://www.example.com/about，我不希望它重定向到该网站，但我希望将该页面呈现为我的反应应用程序中的弹出窗口。我该如何处理？

Answer 1

您可以为链接创建一个包装器组件，以检查href道具是否与您的网站位置匹配或转到第三方网站，并呈现正常的a标记或模式对话框里面有一个iframe。

EG。 Link.js

import React, { Component, Fragment } from 'react'
import Modal from '...' // any of the available modal component for react

export default class Link extends Component {
  state = { isOpen: false }

  render () {
    const url = new URL(this.props.href)
    if (url.hostname === WEBSITE_HOSTNAME) return (
      <a href={this.props.href}>{this.props.children}</a>
    )

    return (
      <Fragment>
        // you could also use an <a> here if you want users to be able to open the link in a new tab with a right click
        <button onClick={() => this.setState({ modalOpen: true })}>{this.props.children}</button>
        <Modal isOpen={this.state.isOpen}>
          <iframe src={this.props.href} />
        </Modal>
      </Fragment>
    )
  }
}

更好的是，将其拆分为两个组件，因为不需要常规链接就可以拥有任何状态...

如何在反应应用程序中将外部链接显示为弹出窗口？

1 个答案: