如何使用一些reactjs-popup示例代码修复Typescript错误

Question

以下代码（取自reactjs-popup文档）在使用reactjs-popup组件时给出Typescript错误

Type '(close: any) => Element' is not assignable to type 'ReactNode'.ts(2322)

。除了使用“@ts-ignore”之外，还有其他方法可以解决此错误吗？

import React from 'react';
import Popup from 'reactjs-popup';

const mypopup = () => (
  <div>
    <Popup
      trigger={<button>Information</button>}
      modal
    >
      {close => (
        <div>
          <div>What is this?</div>
          <button onClick={() => { close(); }}>close</button>
        </div>
      )
      }
    </Popup>
  </div>
);

Answer 1

尝试以下操作：

import React from 'react';
import Popup from 'reactjs-popup';

const PopupContent: React.FC<{ close: () => void }> = ({ close }) => (
  <div>
    <div>What is this?</div>
    <button onClick={close}>close</button>
  </div>
);

const MyPopup: React.FC = () => (
  <div>
    <Popup
      trigger={<button>Information</button>}
      modal
    >
      {close => <PopupContent close={close} />}
    </Popup>
  </div>
);

export default MyPopup;

将子组件单独定义为功能组件

PopupContent

并在

Popup

组件中使用它：