打字稿：点击 'X' 没有成功关闭我的弹出横幅

Question

我使用以下代码创建了一个弹出式横幅（如果格式不正确，请见谅）

 //this is in folder Banner.tsx

  import React, {useCallback} from "react";
  type Properties = {
        close: () => void;
       text: string;

   const Banner: React.FC<Properties> = ({close, text}) => {
   const onClick = useCallback(() => {
                   close();},
                   [close, text]);
   return (
      <div className = "BannerBox">
           <div className = "banner">
          <span className = "popup"> {onClick}{close}[x]
          </span>
          {text}
          </div>
     </div>
     );
     };
   export default Banner;


//this is App.tsx

import Banner from "./Components/Banner";
function App(): JSX.Element {

const [isOpen, setIsOpen]=useState(false);
      const toggleBanner = () => {
      SetIsOpen(!isOpen);
};

return (
    <div>
      <input type = "button"
          value = "popup"
          onClick={toggleBanner}/>
          <p>hi</p>
          {isOpen && <Banner text = {"hello"} close={function (): void { throw new Error("Function not implemented.");
          } }/>}
    </div>
export default App;


 //this is my Banner.css file (let me know if you need the full code but this is some of it)

.BannerBox{
 position: fixed;
 background: blue;
 width:50%;

 }
 
 .banner{
 position: relative;
 width: 100%;
 }

 .popup{
 content: 'x';
 position: fixed;
 background: green;
 
 }

代码编译得很好，我没有收到任何错误，但问题是当横幅弹出窗口时，我无法通过单击将其关闭 'X' 我必须刷新页面为了关闭横幅，我不确定如何解决。感谢您的帮助！

Answer 1

假设 close() 实际上会关闭弹出横幅，因为您没有显示它的实现。

这一行导致了问题

<span className = "popup">{onClick}{close}[x]</span>

您应该将函数传递给 onClick 侦听器。类似于：

<span className = "popup" onClick={close}>[x]</span>

Answer 2

close 函数需要传递给充当按钮的 span 的 onClick 回调。这些被添加为 jsx 元素的“属性”。请参阅下面 onClick={onClick}，其中您的 onClick 回调函数是通过引用传递的（注意没有在大括号内调用括号）

在returnBanner.tsx

        <span className="popup" onClick={onClick}>
          [x]
        </span>

close 被传递到您的 Banner 组件中，因此这需要在您的 App 组件中实现。我通过将 isOpen 显式设置为 false（而不是调用切换）来确保它始终关闭

在App.tsx的return

{isOpen && <Banner text={"hello"} close={() => setIsOpen(false)} />}

总共

Banner.tsx

import React, { useCallback } from "react";
import "./Banner.css";

type Properties = {
  close: () => void;
  text: string;
};

const Banner: React.FC<Properties> = ({ close, text }) => {
  const onClick = useCallback(() => {
    close();
  }, [close]);

  return (
    <div className="BannerBox">
      <div className="banner">
        <span className="popup" onClick={onClick}>
          [x]
        </span>
        {text}
      </div>
    </div>
  );
};

export default Banner;

和App.tsx

import React, { useState } from "react";

import Banner from "./Components/Banner";

function App(): JSX.Element {
  const [isOpen, setIsOpen] = useState(false);

  const toggleBanner = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <input type="button" value="popup" onClick={toggleBanner} />
      <p>hi</p>
      {isOpen && <Banner text={"hello"} close={() => setIsOpen(false)} />}
    </div>
  );
}

export default App;

查看代码和框 here

打字稿：点击 'X' 没有成功关闭我的弹出横幅

Typescript: Clicking 'X' doesn't successfully close my popup banner

css

popup

typescript

reactjs