如何将数据传递到 Ant Design Modal

Question

我有一个简单的应用程序，可以弹出 Ant 设计模式。像这样：

    render() {
    return (
        <div>
                <Menu className="parent">
                    <Menu.Item className="menu_item" onClick={DataModal} >
                        <span className="item_name">Data</span>
                        <Icon type="right" className="item_icon" style={{ float: 'right', fontSize: '1.5em' }} />
                    </Menu.Item>
               </Menu>
        </div>
     )}

当用户单击菜单项时，它会弹出DataUsage如下模式：

数据.js

export default function DataModal() {
    Modal.info({
        title: 'Data',
        content: (
            <div className="modal_data_wrapper">

           </div>
        ),
        style: { top: 0, height: '83vh' },
        width: '100%',
        onOk() { },
    });
}

弹出窗口工作正常。我需要向该模式发送一些数据。我怎样才能做到这一点 ？

Answer 1

您可以将其传递到模态创建函数中。例如：

export default function DataModal(dataToPassIn) {
Modal.info({
  title: 'Data',
  content: (
    <div className="modal_data_wrapper">
      {dataToPassIn}
    </div>
  ),

然后在调用时传入参数即可：

<Menu.Item className="menu_item" onClick={() => DataModal('hello')} >