一键实现React可移除Dialog跳转页面：你的开发神器

2024-02-14 21:25:04

有时，我们需要在React中创建一个可移除的Dialog，并让它能够跳转到某个特定的页面。使用window.location.href重新定位页面，可以轻松实现这一目标。

让我们一步一步地了解如何使用window.location.href在React中创建可移除Dialog并跳转页面：

创建Dialog组件

import React, { useState } from "react";

const Dialog = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <div className={isOpen ? "dialog-open" : "dialog-closed"}>
      <div className="dialog-content">
        <h1>{props.title}</h1>
        <p>{props.content}</p>
        <button onClick={handleClose}>Close</button>
        <button onClick={() => window.location.href = props.targetUrl}>Go to Page</button>
      </div>
    </div>
  );
};

export default Dialog;

在这个组件中，我们使用useState钩子来管理Dialog的状态，并定义了一个handleClose函数来关闭Dialog。我们还在Dialog中包含了一个按钮，当点击时会将用户重定向到targetUrl指定的页面。

使用Dialog组件

import React from "react";
import Dialog from "./Dialog";

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  return (
    <div>
      <button onClick={handleOpen}>Open Dialog</button>
      <Dialog
        title="Hello World"
        content="This is a simple dialog."
        targetUrl="https://www.google.com"
        isOpen={isOpen}
      />
    </div>
  );
};

export default App;

在这个组件中，我们使用useState钩子来管理Dialog的状态，并定义了一个handleOpen函数来打开Dialog。然后，我们使用Dialog组件，并将isOpen属性设置为true以使其可见。我们还在Dialog组件中指定了title、content和targetUrl属性。