使用 Portal 优雅实现“浮”在页面上的组件

产品需求

产品需求，实现一个选择器 Selector 组件，要求浮在页面上方。在网上随便找了个图，如下：

实现方案

实现这一的一个 Selector 组件并不难，不是本文的讨论内容。
本文讨论的主要是，在有类似于 Selector 组件一样，“浮”在页面的组件时，如何设计 React 组件树？

方案一：Seletor 组件是 App 组件的子组件。

优势：Selector 属于 App 的子节点，子节点不受父节点的样式属性( position overflow )的干扰。

劣势：Selector 的显示状态属于 App 节点，跨分支传递状态成本太高。使用 Redux 或 Mobx 跨分支传递状态，依赖第三方组件，不利于复用；而手动传递，至少要 4 个步骤，如果 Button 节点更深，步骤会更多。并且这样写出的代码，耦合性太强，不利于维护。

方案二：Selector(fixed) 组件是 Button 组件的子组件。

优势：Selector 的显示状态属于 Button 节点控制，状态管理成本低。

劣势：Selector 属于 Button 的子节点。而当父节点 Button 有文字超出隐藏的需求时(overflow: hidden)，子节点 Selector 会被隐藏。

那么，有没有两全齐美的方案呢？有。

方案三：在 React 组件树设计上，Selector 是 Button 的子组件。但是在 DOM 树的角度 Selector 是 Body 的子节点。

在这个方案中，Button 和 Selector 还是属于 React 组件树中的父子节点，享有父子组件状态传递方便的优势。
但是，Button 和 Selector 不再属于 DOM 树中的父子节点！Selector 被渲染到了 Body 节点下面，属于 Body 的子节点。这样 Selector 组件再也不会受到 Button 组件的样式干扰了。

在 React 中如何做到这一点呢？使用 React 16 的 Portals。
这个新属性的介绍文章很短，我就翻译下一吧。翻译只是意译，只为更好理解。

Portals

Portals 提供了一种超级棒的方法，可以将 react 子节点的 DOM 结构，渲染到 react 父节点之外的 DOM 中。

ReactDOM.createPortal(child, container)

第一个参数 child 是任何可以被渲染的 ReactChild，比如 element, string 或者 fragment. 第二个参数 container 是一个 DOM 元素。

使用方法

一般来说，在 react 中是父子节点的关系，那么在 DOM 中也是父子节点的关系。

render() {
  // 在 react 中 div 和 children 是父子的关系，在 DOM 中 div 和 children 也是父子的关系。
  return (
    <div>
      {this.props.children}
    </div>
  );
}

然而，有时候打破了这种 react 父子节点和 DOM 父子节点的映射关系是非常有用的。使用 createPortal 可以将 react 的子节点插入到不同的 DOM 节点中。

render() {
  // React 并没有创建一个新的 div，来包裹 children。它将 children 渲染到了 domNode 中。
  // domNode 可以是任意一个合法的 DOM 节点，无论它在 DOM 节点中的哪个位置。
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

portal 一个典型的用法是，当父组件有 overflow: hidden 或者 z-index 样式时，但是子组件需要“打破”父组件容器，显示在父组件之外。比如 dialogs，hovercards，tooltips 组件。

[在 CodePen 上尝试一下(https://codepen.io/gaearon/pe...

Portals 的事件冒泡

虽然 portal 可以在 DOM 树中的任意位置，但是它的行为依旧和普通的 React child 一样。比如上下文环境完全一样，无论 child 是不是 portal； portal 也一直存在于在 React 树上，无论它位于 DOM 树中的什么位置。

包括，事件冒泡。portal 节点的事件会冒泡到它的 React 树的祖先节点上，即使这些 React 树上的祖先节点并不是 DOM 树上的祖先节点。比如，有下面的 HTML 结构。

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>

在 DOM 树中是 portal 和它的 React 父组件兄弟节点，但是由于 React 的事件处理规则，让 portal 的 React 父组件有能力捕获 portal 的冒泡事件。

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

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    // The portal element is inserted in the DOM tree after
    // the Modal's children are mounted, meaning that children
    // will be mounted on a detached DOM node. If a child
    // component requires to be attached to the DOM tree
    // immediately when mounted, for example to measure a
    // DOM node, or uses 'autoFocus' in a descendant, add
    // state to Modal and only render the children when Modal
    // is inserted in the DOM tree.
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {clicks: 0};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // This will fire when the button in Child is clicked,
    // updating Parent's state, even though button
    // is not direct descendant in the DOM.
    this.setState(prevState => ({
      clicks: prevState.clicks + 1
    }));
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        <p>Number of clicks: {this.state.clicks}</p>
        <p>
          Open up the browser DevTools
          to observe that the button
          is not a child of the div
          with the onClick handler.
        </p>
        <Modal>
          <Child />
        </Modal>
      </div>
    );
  }
}

function Child() {
  // The click event on this button will bubble up to parent,
  // because there is no 'onClick' attribute defined
  return (
    <div className="modal">
      <button>Click</button>
    </div>
  );
}

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

[在 CodePen 上尝试一下(https://codepen.io/gaearon/pe...

父组件能够捕获 portal 的冒泡事件的设计，允许开发者更加灵活的进行抽象，而这些抽象不依赖于 portal 。例如，如果你渲染一个 <Modal /> 组件，它的父组件能够捕获它的事件，无论使用的是不是 portal 实现的 (fixed 也能实现)。

使用 portals 的实现 Selector

// 数据和选中的元素的状态由 Selector 自己控制
// 不要将 data、index 状态暴露给其他组件
// 暴露给父组件，越多和父组件耦合的就越重
class Selector extends Component {
    componentDidMount(){
        fetch('xxx')
            .then(data => {
                this.setState({
                    data,
                })
            })
    }

    handleSelect = index => {
        this.setState({
            index
        })
    }
    
    render() {
        return (
            <List 
                data={this.state.data}
                index={this.state.index}
                onSelect={this.handleSelect}
            />
        )
    }

}

// 控制 Modal 显示状态都封装在 Button 中
class Button extends Component {
    handleClick = () => {
        this.setState( prevState => ({
            show: !prevState.show
        }))
    }
    
    render() {
        return (
            <div onClick={this.handleClick}>
                <span>我是按钮</span>
                // 为了保存 Selector 的状态，不要 unmount Modal，用 display: none 实现隐藏。
                <Modal show={this.state.show}>
                    <Selector />
                </Modal>
            </div>
        )
    }
}


class App extends Component {
    render() {
        return (
            <div>
                <Button />
                <Other />
            </div>
        )
    }
}

使用 Portal 优雅实现“浮”在页面上的组件

产品需求

实现方案

Portals

使用方法

Portals 的事件冒泡

使用 portals 的实现 Selector

讨论：属性暴露的越多越好，还是越少越好？

fitfish

引用和评论

如何写好专栏？

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合