在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

我想出了如下的解决方案。

Notification.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()插入任何我想要的模态。

我唯一不安全的是ReactDOM的包大小，实际上是125Kb到Notification.tsx。

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

对于自定义，您将需要创建自己的模态设计，可能在react门户中，根据需要进行设计。但是打开/关闭将通过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> }
</>
)
}