Использование порталов React для отображения модального компонента (?) При щелчке строки таблицы

Question

Познакомившись с React, я наткнулся на концепцию порталов в документации для разработчиков. Однако у меня возникают трудности с пониманием того, как этот компонент портала на самом деле рендерится по требованию, и как я могу передать ему данные для заполнения модального режима.

В настоящее время у меня есть два компонента, которые взаимодействуют друг с другом: View.js а также DataTable.js,

View.js:

const Example = (props) => {
    console.log(props);
    return (
        <div>
            <TopBar />
            <DeploymentsHeader env={props.match.params.env} />
            <PendingDataTable env={props.match.params.env} />
            <DataTable env={props.match.params.env} />
        </div>
    );
}

Теперь для DataTable компонент, реактивная таблица визуализируется. Когда пользователь нажимает на отдельную строку, моя цель состоит в том, чтобы было модальное всплывающее окно (мне все еще неясно, должен ли он иметь свой отдельный компонент, если я использую порталы React), и чтобы он был заполнен данными, которые уже привязан к отдельному ряду (который я тестировал и у меня тоже есть доступ).

Код выглядит примерно так:

<ReactTable
   data={tableData}
   filterable={true}
   getTrProps={this.onRowClick}
       columns={[
          {
            Header: "Header",
            accessor: "service_name"
           },
           ...
           ]}
/>

Теперь это функция, которая передается реквизиту строки таблицы и выполняется по клику:

onRowClick = (state, rowInfo) => {
        return {
            onClick: e => {
                console.log('A Tr Element was clicked!');
                console.log(rowInfo.original);
            }
        }
    }

Данные, которые мне нужны, легко доступны для меня в объекте rowInfo.original, Теперь мой вопрос: что считается "правильным" или "оптимальным" способом загрузки модального режима с использованием портала, когда выполняется событие, такое как этот триггер onClick?

1. Нужно ли иметь отдельный Modal.js компонент, который на самом деле является порталом?
2. Как я могу получить данные из этого onRowClick функция переносится на этот модальный портал?

Спасибо всем.

Answer 1

Вы можете условно визуализировать портал, как если бы он был просто другим компонентом React. Для начала вы должны разделить модал на отдельный компонент. Затем вы можете сохранить идентификатор элемента или элемент в состоянии и переключаться, чтобы сообщить модалу, когда показывать или нет.

onRowClick = (state, rowInfo) => {
    return {
        onClick: e => {
            console.log('A Tr Element was clicked!');
            console.log(rowInfo.original);
            this.setState({
                data: rowInfo.original,
                showModal: true
            });
        }
    }
}

render() {
    return (
        <ReactTable
            data={tableData}
            filterable={true}
            getTrProps={this.onRowClick}
            columns={[
                {
                    Header: "Header",
                    accessor: "service_name"
                },
                ...
            ]}
        />
        {this.state.showModal &&  React.createPortal( <Modal data={this.state.data}>Your Data Goes Here</Modal>, document.getElementById('modal-portal')) }
    )
}

РЕДАКТИРОВАТЬ:

У них есть модальный пример в документации по порталу, который вы должны проверить.

РЕДАКТИРОВАТЬ 2:

this.state.showModal это часть состояния, которое вам нужно добавить. Вы будете использовать это для условного рендеринга <Modal /> компонент (который вы создаете). То, что я сделал здесь, является сокращением для:

if(this.state.showModal) {
    return React.createPortal(...);
} else {
    return null;
}

Что касается фактического <Modal /> Компонент, вы можете сделать это, как вы хотите, вы можете использовать модальный пакет реакции, загрузочные модалы или просто создать свой собственный.

Пример кастомного Modal.js:

const Modal = ({ children, data }) => (
    <div className="my-modal">
        {children}
        // Here you can do stuff with data if you want
    </div>
);

CSS:

.my-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 2

Примечание. ReactDOM.createPortal - это функция от реакции-не реагирует.

import {createPortal} из'act-dom'