前端kea使用Antd的Modal组件来弹出不同内容的提示框。通过在Modal组件中渲染不同的内容代码怎么写

可以通过在Antd的Modal组件中使用条件渲染来实现渲染不同的内容。

具体来说，可以在Modal组件中使用visible和onCancel属性控制弹出框的显示和隐藏，使用title属性控制弹出框的标题，使用footer属性控制弹出框的底部按钮。然后，通过在Modal组件的children属性中渲染不同的内容，来实现弹出框中显示不同的提示信息。

下面是一个示例代码：

import React, { useState } from 'react';
import { Modal, Button } from 'antd';

function ExampleModal() {
  const [visible, setVisible] = useState(false);
  const [modalContent, setModalContent] = useState(null);

  const showModal = (content) => {
    setModalContent(content);
    setVisible(true);
  };

  const handleOk = () => {
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <div>
      <Button onClick={() => showModal('这是第一个提示框')}>显示第一个提示框</Button>
      <Button onClick={() => showModal('这是第二个提示框')}>显示第二个提示框</Button>
      <Modal
        title="提示框"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={[
          <Button key="ok" type="primary" onClick={handleOk}>
            确定
          </Button>,
        ]}
      >
        {modalContent}
      </Modal>
    </div>
  );
}

export default ExampleModal;

在这个示例中，我们定义了一个ExampleModal组件，其中包含两个按钮，分别用来显示不同的提示框。当用户点击其中一个按钮时，我们会调用showModal函数，并传入不同的提示信息作为参数。这个函数会将传入的提示信息保存到modalContent状态中，并将visible状态设置为true，从而显示弹出框。

在Modal组件中，我们使用条件渲染来渲染不同的提示信息。具体来说，我们将modalContent状态作为children属性传入Modal组件中，从而在弹出框中显示不同的提示信息。

需要注意的是，这里的示例只提供了一个简单的实现方式，如果需要更复杂的提示框内容，还需要进行相应的调整和修改。