reactjs - 函数调用后如何渲染反应组件？

Question

showCustomModal我的目标是在函数 ( ) 调用后显示自定义 antd 模态（如Modals.confirm）。

CustomModal.tsx：

export function showCustomModal() {
  return <Modal>custom modal</Modal>
}

组件.tsx

import { showCustomModal } from 'CustomModal'

const Component= () => {
   
  const showModal = () => {
     showCustomModal()
  }

  return <button onClick={showModal}>show modal</button>
}

标签： reactjsantd

Answer 1

最后需要调用 React 组件作为回报，这里您要做的是使用状态来控制何时显示组件。

import { showCustomModal } from 'CustomModal'

const Component= () => {
  const [show, setShow] = useState(false);
  return (
    <>
      <button onClick={setShow(true)}>show modal</button>
      {show && <showCustomModal />}
    </>
  )
}