点击X无法关闭React+Typescript实现的弹窗横幅问题求助

问题根因汇总 #

• Banner组件内的关闭按钮未绑定点击事件，你定义的关闭逻辑仅作为文本渲染到页面，点击不会触发执行
• App组件传递给Banner的close回调未实现关闭逻辑，直接抛出异常，就算触发事件也无法修改弹窗显隐状态
• 存在多处语法疏漏：Properties类型定义缺少闭合括号、App组件未导入useState、状态更新函数大小写拼写错误、JSX结构缺少闭合标签
• CSS样式不符合使用规范：普通元素设置content属性无效，未设置可点击光标提示

逐文件修复代码 #

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]);
  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;

Banner.css优化 #

.BannerBox{
  position: fixed;
  background: blue;
  width:50%;
}
 
.banner{
  position: relative;
  width: 100%;
}

.popup{
  cursor: pointer;
  background: green;
}

内容的提问来源于stack exchange，提问作者christen