Question

我已经看到react-select支持门户（https://react-select.com/advanced#portaling），但我猜它使用了React 16门户API。我看到了React 15（https://github.com/tajo/react-portal）门户的实现，但目前还不确定是否有将其与react-select结合使用的方法。

有没有办法将这两个库集成在一起？

Answer 1

开箱即用似乎是不可能的，即使 react-portal 库与 React15 一起使用， react-select 也取决于官方的 ReactDOM.createPortal

（检查https://github.com/JedWatson/react-select/blob/2654ce0505d9e3820e169109cc413778fc20f843/src/components/Menu.js中的代码）。

如果未定义 ReactDOM.createPortal ，则可能的解决方案是使用分叉 react-select 使用 react-portal 后备广告，然后更改其< em> Menu 组件渲染功能。

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;

我已经在React和ReactDOM 15.4.2上使用npm link在react-select本地更改上进行了测试，并且可以正常工作。

Answer 2

~~这只是理论上的~~ ，但是使用components framework用门户覆盖MenuPortal组件可能是一种解决方案。但是您可能必须实现自己的定位功能。

// 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
    }}
/>

~~再次，这只是一个理论，在撰写此答案时，我无法对此进行验证。~~

编辑：这不再只是一种理论。我已经测试了这个用例，并创建了a working example。为了获得正确的样式，我不得不从MenuPortal组件的源代码中复制一些功能。

可以在React 15中使用门户并进行react-select吗？

2 个答案: