передавать данные из одной функции в другую функцию внутри компонента React - PullRequest
Новая
       77

передавать данные из одной функции в другую функцию внутри компонента React

0 голосов
/ 13 апреля 2020

У меня есть компонент React, который возвращает таблицу с данными.

Я также использую портал React для открытия нового Div в верхней части таблицы.

Я хочу передать данные, которые находится в таблице для React Portal.

В приведенном ниже коде видно, что портал называется MyPortal, а таблица называется ResearchTable.

Данные, отображаемые в таблице называется 'data', и в этом примере я показываю 'data.astronomyTitle' в таблице.

Я также хочу показать 'data.astronomyTitle' в портале React, который появляется.

Но я не могу понять, как получить доступ к «данным» в моей части кода MyPortal, потому что «данные» есть только в части таблицы.

Итак, мой вопрос, есть ли способ передать данные для MyPortal? Или, может быть, сохранить его в глобальной переменной, к которой затем может получить доступ MyPortal?

Спасибо! 

const MyPortal = ({ children }) => (

    ReactDOM.createPortal(
        <div id="portal_GalaxyDetails">
            {children}
        </div>,
        document.getElementById('portal-root'),
    )
)

function ResearchTable() {
const [isShown, setIsShown] = React.useState(false);
const hide = () => setIsShown(false);
const show = () => setIsShown(true);

{
    Header: 'Research Opportunities',
    columns: [
        {
         id: <td>{data.astroId}</td>
        },

        {
         title: <td><a href="#" onClick={show}>{data.astronomyTitle}</a></td>
        }
    ]

    const [data, setData] = React.useState([]);
    React.useEffect(() => {
    galaxyData().then(res => {
        setData(res.data);
    });
}, []);

return (
    <div id="mainContent">
        <table>
            <tr>
                {columns}
            </tr>
            </table>
        </div>

    {isShown && (
        <MyPortal>
            <p>This is my portal</p>
            <button onClick={hide}>Close</button>
        </MyPortal>
    )}
);

1 Ответ

1 голос
/ 13 апреля 2020

Отправьте данные на портал как реквизит, т.е. 

<MyPortal astroId={data.astroId}>
  <p>This is my portal</p>
  <button onClick={hide}>Close</button>
</MyPortal>

, а затем убедитесь, что вы подбираете реквизиты в компоненте портала: 

const MyPortal = ({ astroId, children }) => (

    ReactDOM.createPortal(
        <div id="portal_GalaxyDetails">
            <p>{astroId}</p>
            {children}
        </div>,
        document.getElementById('portal-root'),
    )
)
...