@1stdibs/react-portal 中文文档教程

Question

React-portal

在 React 中与模态框、灯箱或加载条苦苦挣扎？ React-portal 创建了一个新的顶级 React 树并将其子树注入其中。 这对于正确的样式（尤其是定位）是必要的。

Features

• transports its child into a new React component and appends it to the document.body (creates a new independent React tree)
• can be opened by the prop isOpened
• can be opened after a click on an element that you pass through the prop openByClickOn (and then it takes care of the open/close state)
• doesn't leave any mess in DOM after closing
• provides its child with this.props.closePortal callback
• provides close on ESC and close on outside mouse click out of the box
• supports absolute positioned components (great for tooltips)
• no dependencies
• fully covered by tests

Demo

尝试 https://miksu.cz/react-portal 或

git clone https://github.com/tajo/react-portal
cd react-portal
npm install
npm run build:examples
open examples/index.html

Installation

npm install react react-dom react-portal --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Portal from 'react-portal';

export default class App extends React.Component {

  render() {
    const button1 = <button>Open portal with pseudo modal</button>;

    return (
      <Portal closeOnEsc closeOnOutsideClick openByClickOn={button1}>
        <PseudoModal>
          <h2>Pseudo Modal</h2>
          <p>This react component is appended to the document body.</p>
        </PseudoModal>
      </Portal>
    );
  }

}

export class PseudoModal extends React.Component {

  render() {
    return (
      <div>
        {this.props.children}
        <p><button onClick={this.props.closePortal}>Close this</button></p>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.getElementById('react-body'));

Documentation - props

Always required

children : ReactElement

门户需要一个孩子（) 将被移植。

One of these two required

isOpened : bool

如果为 true，则门户是打开的。 如果为假，门户将关闭。 由您负责关闭（也称为照顾状态）。 如果你想让你的生活更轻松，请不要使用这个道具。 请改用 openByClickOn！

openByClickOn : ReactElement

第二种方式如何打开传送门。 该元素将立即由门户呈现 使用触发门户打开的 onClick 处理程序。 然后如何关闭门户？ 门户为其已移植的子级提供回调 this.props.closePortal。 或者您可以使用内置的门户关闭方法（closeOnEsc，……更多内容见下文）。 请注意，您不必处理打开/关闭状态（就像使用 isOpened 属性时一样）。

Optional

closeOnEsc: bool

如果为真，则可以通过 ESC 键关闭门户。

closeOnOutsideClick: bool

如果为 true，则可以通过单击外部鼠标来关闭门户。

onOpen: func(DOMNode)

当门户打开并呈现时调用此回调（对于为 DOMNode 设置动画很有用）。

beforeClose: func(DOMNode, removeFromDOM)

当触发关闭事件时调用此回调，但它会阻止从 DOM 中正常移除。 因此，您可以先做一些 DOMNode 动画，然后调用 removeFromDOM() 从 DOM 中删除门户。

onClose: func

当门户关闭时和 beforeClose 之后调用此回调。

onUpdate: func

当（重新）呈现门户时调用此回调。

Tips & Tricks

• Does your modal have a fullscreen overlay and the closeOnOutsideClick doesn't work? There is a simple solution.
• Does your inner inner component <LevelTwo />

<Portal>
  <LevelOne>
    <LevelTwo />
  </LevelOne>
</Portal>

还需要访问 this.props.closePortal()？ 您不能只在 组件的渲染方法中使用 {this.props.children}。 您必须改为克隆它：

{React.cloneElement(
  this.props.children,
  {closePortal: this.props.closePortal}
)}

Open modal programmatically

有时您需要自动打开门户（例如模态）。 没有按钮可以点击。 没问题，因为门户有 isOpen 道具，所以您可以将其设置为 true 或 false。 然而，这完全取决于您来处理门户关闭（ESC，外部点击，没有 this.props.closePortal 回调...）。

但是，即使没有 isOpen，也有一个很好的技巧可以实现这一点：

<Portal ref="myPortal">
  <Modal title="My modal">
    Modal content
  </Modal>
</Portal>

this.refs.myPortal.openPortal()
// opens the portal, yay!

Contribution

请创建问题和拉取请求。

git clone https://github.com/tajo/react-portal
cd react-portal
npm install
npm start
open http://localhost:3000

不要忘记在每次提交之前运行它：

npm test

Credits

灵感来自 React.js Conf 2015 - Hype!, Ryan Florence

Vojtech Miksu 2015, miksu.cz, @vmiksu