react 插槽(Portals)

Posted 2021-01-27 yadiblogs

前言：

昨天刚看了插槽，以为可以解决我工作中遇到的问题，非常激动，我今天又仔细想了想，发现并不能解决。。。 不过还是记录一下插槽吧，加深印象，嗯，就酱。

插槽作用：

插槽即：ReactDOM.createPortal(child, container) ，由ReactDom提供的接口。 可以实现将子节点渲染到父组件DOM层次结构之外的DOM节点。

第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 片段(fragment)。第二个参数（container）则是一个 DOM 元素。

应用场景：

对于 portal 的一个典型用例是当父组件有 overflow: hidden 或 z-index 样式，但你需要子组件能够在视觉上 “跳出(break out)” 其容器。例如，对话框、hovercards以及提示框。所以一般react组件里的模态框，就是这样实现的~

特点：事件冒泡

事件冒泡和普通react子节点一样，是因为portal仍然存在于React tree中，而不用考虑其在真是DOM tree中的位置。嗯，这个特性很方便。

 

代码就上一些文档中的例子吧。。。

// These two containers are siblings in the DOM
const appRoot = document.getElementById(‘app-root‘);
const modalRoot = document.getElementById(‘modal-root‘);

// Let‘s create a Modal component that is an abstraction around
// the portal API.
class Modal extends React.Component {
  constructor(props) {
    super(props);
    // Create a div that we‘ll render the modal into. Because each
    // Modal component has its own element, we can render multiple
    // modal components into the modal container.
    this.el = document.createElement(‘div‘);
  }

  componentDidMount() {
    // Append the element into the DOM on mount. We‘ll render
    // into the modal container element (see the html tab).
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    // Remove the element from the DOM when we unmount
    modalRoot.removeChild(this.el);
  }
  
  render() {
    // Use a portal to render the children into the element
    return ReactDOM.createPortal(
      // Any valid React child: JSX, strings, arrays, etc.
      this.props.children,
      // A DOM element
      this.el,
    );
  }
}

// The Modal component is a normal React component, so we can
// render it wherever we like without needing to know that it‘s
// implemented with portals.
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showModal: false};
    
    this.handleShow = this.handleShow.bind(this);
    this.handleHide = this.handleHide.bind(this);
  }

  handleShow() {
    this.setState({showModal: true});
  }
  
  handleHide() {
    this.setState({showModal: false});
  }

  render() {
    // Show a Modal on click.
    // (In a real app, don‘t forget to use ARIA attributes
    // for accessibility!)
    const modal = this.state.showModal ? (
      <Modal>
        <div className="modal">
          <div>
            With a portal, we can render content into a different
            part of the DOM, as if it were any other React child.
          </div>
          This is being rendered inside the #modal-container div.
          <button onClick={this.handleHide}>Hide modal</button>
        </div>
      </Modal>
    ) : null;

    return (
      <div className="app">
        This div has overflow: hidden.
        <button onClick={this.handleShow}>Show modal</button>
        {modal}
      </div>
    );
  }
}

ReactDOM.render(<App />, appRoot);

可以看到官例： 先写了一个Modal组件，显示Modal的props.children，在新建的插槽中。

本文到这里就结束了！

最后随手 讲一下我为什么昨天觉得可以解决我的问题，

我遇到的问题是：有一个容器，设置了overflow属性；容器里面一个一个的li，也就是列表；每一条的列表后面都有一个icon，悬浮会显示一些额外信息。问题就是，由于外面设置了overflow，导致icon显示的信息，在靠近上下左右等位置  就就就显示不出来了！！！哎，心塞塞啊~~ 本来以为这个插槽可以解决，可是，问题又来了，我插入到overflow 容器外面后，我就无法定位每一条的后面icon的位置了。。。

呜呜呜。。。不忍了，哇哇哇！！！