如何将数据传递到Ant设计模式

时间:2019-03-06 03:18:18

标签: javascript reactjs antd

我有一个简单的应用程序,它会弹出一个蚂蚁设计模式。像这样:

    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模式,即:

Data.js

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

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

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

1 个答案:

答案 0 :(得分:1)

您可以将其传递给模态创建函数。例如:

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

然后在调用它时将args传递进来:

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