打字稿：如何修复此错误 -> "element is not assignable to string" / 当我单击 '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 in 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 = {<><b>testing</b><p>testing popup</p><button>testing button</button></>} handleClose={toggleBanner}/>}
      </div>
export default App;

但我不断收到此错误，我不确定如何修复它 -> 类型元素不可分配给类型“字符串”。错误在这一行：{isOpen && testing

testing popup

testing button} handleClose={toggleBanner }/>}

我想我已经解决了原来的问题，所以现在我的 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;

但是当我添加 css 并设置弹出框的样式时，当我按 x 时它不会关闭。我必须刷新网站才能关闭它，但我不确定如何解决这个问题。没有更多的编译错误。

    //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;
     
     }

Answer 1

那是因为在

<Banner text = {<>testing testing popup testing button</>} handleClose={toggleBanner}/>}

text 属性需要一个字符串而不是一个元素。你在这里自己定义了

 type Properties = {
     close: () => void;
     text: string; //this line

打字稿：如何修复此错误 -> "element is not assignable to string" / 当我单击 'X' 时没有任何反应

Typescript: How to fix this error -> "element is not assignable to string" / nothing happens when i click 'X'

popup

typescript

reactjs