Можно ли использовать порталы с React 15 и response-select? - PullRequest
Новая
       1

Можно ли использовать порталы с React 15 и response-select?

0 голосов
/ 02 апреля 2019

Я видел, что Reaction-Select поддерживает порталы (https://react -select.com / advanced # portaling ), но я предполагаю, что он использует API портала React 16.Я видел реализацию порталов для React 15 (https://github.com/tajo/react-portal), но я не уверен, что на данный момент есть способ использовать его с Reaction-Select.

Есть ли способ объединить эти двабиблиотеки вместе?

Ответы [ 2 ]

0 голосов
/ 02 апреля 2019

Это всего лишь теория , но перезапись компонента MenuPortal на вашем портале с использованием Framework компонентов может быть решением.Но вам, возможно, придется реализовать свои собственные функции позиционирования. 

// I would recommend using a class instead of a function component, this is just for representation purposes
const MenuPortal = (props) => {
    /* ... */
    return <Portal>{props.children}</Portal>;
};

<Select
    { ... }
    menuPortalTarget={document.body} // needed to activate portaling
    components={{
        MenuPortal
    }}
/>

Опять же, это всего лишь теория , на момент написания этого ответа я не мог проверить это.

Редактировать : Это уже не просто теория.Я протестировал этот вариант использования и создал рабочий пример .Мне пришлось скопировать некоторые функциональные возможности из исходного кода компонента MenuPortal, чтобы получить правильные стили.

0 голосов
/ 02 апреля 2019

По умолчанию это невозможно, даже библиотека реагирует на портал работает с React15 , реагирует на выбор зависит от официального ReactDOM.createPortal

(проверьте код в https://github.com/JedWatson/react-select/blob/2654ce0505d9e3820e169109cc413778fc20f843/src/components/Menu.js).

Возможные решения: fork реагировать-выбрать , чтобы использовать реагировать-портал откат, если ReactDOM.createPortal не определен, а затем изменить его Меню функция рендеринга компонента. 

import ReactDOM from 'react-dom';
import { Portal } from 'react-portal';
....


const createPortal = ReactDOM.createPortal
  ? (child, node) => ReactDOM.createPortal(child, node)
  : (child, node) => <Portal node={node}>{child}</Portal>;

return appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper;

Я проверил, используя ссылку npm на локальные изменения реакции-выбора, с React и ReactDOM 15.4.2, и это работает.

...