TypeScript报错element不可分配给string、弹窗点X无法关闭如何解决

问题1：text属性传入JSX元素报错 #

报错原因 #

你在Banner组件的Properties类型定义中，将text字段声明为string类型，仅能接收字符串值，无法兼容JSX元素类型。

修复方法 #

将text的类型修改为React.ReactNode，该类型支持接收字符串、数字、JSX元素、Fragment等所有React可渲染内容：

// 修改Banner.tsx中的Properties类型定义
type Properties = {
  close: () => void;
  text: React.ReactNode; // 把string改成React.ReactNode
};

问题2：点击X按钮无法关闭弹窗 #

错误原因 #

存在多处逻辑错误：

1. Banner组件中没有给X按钮绑定点击事件，你直接把onClick函数作为内容渲染到了页面，没有绑定到DOM的点击事件上
2. 你修改后的App.tsx中给Banner传的close属性是一个主动抛错的空实现，调用后不会执行关闭逻辑
3. 代码存在大小写错误：useState返回的更新函数是setIsOpen，你误写为SetIsOpen，会导致更新状态失败
4. 初始版本App.tsx中给Banner传的属性名为handleClose，和Banner组件定义的close属性名不匹配，导致函数接收失败

修复方法 #

1、修正Banner.tsx逻辑

将点击事件绑定到X按钮的DOM节点上，删除无意义的函数渲染：

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

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

  return (
    <div className = "BannerBox">
      <div className = "banner">
        <span className = "popup" onClick={onClick} style={{cursor: 'pointer'}}>
          [x]
        </span>
        {text}
      </div>
    </div>
  );
};
export default Banner;

2、修正App.tsx逻辑

修正状态更新函数大小写，给Banner传正确的close属性：

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 = {<><b>testing</b><p>testing popup</p><button>testing button</button></>} 
          close={toggleBanner} 
        />
      )}
    </div>
  );
}
export default App;

3、修正CSS冗余属性

content属性仅对::before/::after伪元素生效，普通DOM节点设置无效，可以删除：

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

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

.popup{
  position: fixed;
  background: green;
}

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