Как передать данные модальному дизайну 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

06.03.2019 04:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

5 081

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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')?

— 06.03.2019 04:38

Потому что стрелка — это функция. Если вы просто сделаете DataModal('hello'), модальное окно появится при монтировании, а не при клике. В данном случае это результат, а не функция. Предлагаю попробовать и посмотреть, что получится.

— 06.03.2019 05:10

06.03.2019 04:24