在 React 中通過函數調用渲染組件

Question

我厭倦了定義狀態以在條件下呈現組件。 大多數時候我只需要顯示某種通知或警報。 我想知道如何通過從該組件調用函數來呈現該組件。

我找到了一些完全符合我的要求的示例代碼，但我無法對其進行逆向工程以自己實現這一點，因為我不知道Modal.info()函數如何將自身添加到 DOM 中。

我想為自己重新創建Modal組件並通過調用MyModal.info()顯示它。

import { Modal, Button, Space } from 'antd';

const Item = (props: ItemProps) => {
    const { itemGroup, items } = props;

function info() {
  Modal.info({
    title: 'This is a notification message',
    content: (
      <div>
        <p>some messages...some messages...</p>
        <p>some messages...some messages...</p>
      </div>
    ),
    onOk() {},
  });
}

    return (
        <div className="py-6">
            <div
                onClick={() => info()}
                className="cursor-pointer py-6 px-6 text-3xl font-heading font-bold bg-primary text-white"
            >
                <p>{itemGroup.text}</p>
            </div>
            <div className={`${isOpen ? 'block' : 'hidden'} duration-200 transition-all p-3 bg-gray-200`}>
                <ul className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {items.map((x) => (
                        <ItemCard key={x.id} itemData={x} />
                    ))}
                </ul>
            </div>
        </div>
    );
};

Answer 1

我想出了以下解決方案。

通知.tsx

import React from 'react';
import ReactDOM from 'react-dom';

export class Notifier {
    static warn() {
        if (!document) return;
        const rootElement = document.getElementById('__next');
        ReactDOM.render(React.createElement(Notification), rootElement);
    }
}

const Notification = () => {
    return (
             <div className="w-full h-full bg-red-500 absolute top-0 left-0">Notification Content</div>
           );
};

使用此解決方案，我可以通過調用Notifier.warn()將我想要的 Modal 插入到任何位置。

我唯一不安全的是來自ReactDOM的包大小，它實際上向Notification.tsx廣告 125Kb。

Answer 2

你應該能夠像這樣調用 Modal.info()

  <Modal.info
    title='This is a notification message',
    content={) => (
      <div>
        <p>some messages...some messages...</p>
        <p>some messages...some messages...</p>
      </div>
    )}
    onOk={() => {}}
  />;

所有功能組件都可以稱為同類組件。

如果這不起作用，則 Modal.info 不是組件。

要觸發它，您應該遵循文檔中的第一個示例。

https://ant.design/components/modal/

您需要管理某種狀態來告訴 Modal 打開，功能組件可以使用鈎子管理諸如狀態之類的東西。

像這里https://reactjs.org/docs/hooks-state.html

對於自定義，您需要創建自己的模態設計，可能在反應門戶中，根據需要進行設計。 但是打開/關閉將通過 useState 鈎子處理。

import React, { useState } from 'react';

const Component = props => {
  const [open, setOpen] = useState(false);
  

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>
      {open && <Modal>
        <Button onClick={() => setOpen(false)}>Close</Button>
      </Modal> }
    </>
  )
}