如何将数据传递给 Ant Design Modal答案

【问题标题】：How to pass data to a Ant Design Modal如何将数据传递给 Ant Design Modal
【发布时间】：2019-03-06 11:28:24
【问题描述】：

我有一个简单的应用程序，它会弹出一个 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() { },
    });
}

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

【问题讨论】：

标签： javascript reactjs antd

【解决方案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')} >

【讨论】：

它有效，谢谢。为什么要使用粗箭头函数而不是普通的DataModal('hello') 函数？
因为箭头是一个函数。如果您只是执行DataModal('hello')，它将在安装时弹出模态，而不是在单击时弹出。在这种情况下，它是一个结果，而不是一个函数。我建议尝试一下，看看会发生什么。